Results 1 to 4 of 4

Thread: How do I set the center coordinates of a map?

  1. 18 Aug 2012, 6:40 PM #1
    amritsharma
    amritsharma is offline
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default Answered: How do I set the center coordinates of a map?

    {
    xtype: 'map',
    flex: 1,
    mapOptions: {
    zoomControl: false,
    panControl: false,
    rotateControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    zoom: 13
    }
    }

    Hi all,

    I got a map to show up in the container that I want, but I don't know how to show the map that I want. I don't mind just hard coding the coordinating... but later on, ideally use coordinates from a model.

    Let's assume, Lat and Long are X and Y. How would I tell the map or mapOptions what location I want it to show me?

    I have tried a few things, including:

    1. Adding center to mapOptions..
    center : new google.maps.LatLng(X, Y)

    2. Adding 'LatLng' or 'latitute' and 'longitude' attibutes to map and mapOptions... but im just "hoping it works" rather than have a specific strategy with it.

    Help!

    Thanks!

    Amrit
    Reply With Quote Reply With Quote
  2. Best Answer Posted by mitchellsimoens

    This works for me:

    Code:
    new Ext.Map({
    fullscreen : true,
    mapOptions : {
        zoomControl       : false,
        panControl        : false,
        rotateControl     : false,
        streetViewControl : false,
        mapTypeControl    : false,
        zoom              : 13,
        center            : new google.maps.LatLng(38.62452, -90.18514)
    }
});
    YOu have to be careful of using namespaces in properties like config objects as the Google API must be loaded before that class is defined.
  3. 18 Aug 2012, 10:49 PM #2
    pentool
    pentool is offline
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
      0  

    Default

    This will center the map on Apple Computer, Inc. headquarters and also drop a pin with a title that will show on hover.

    app.js
    Code:
    Ext.application({
    name: 'test',


    views: ['Locations'],


    launch: function() {
        Ext.create('test.view.Locations');
    }
});
    Locations.js

    Code:
    Ext.define('test.view.Locations', {
    extend: 'Ext.Panel',


    config:  {
        layout: 'fit',
        fullscreen: true,


        items: [
            {
                xtype: 'map',
                mapOptions: {
                    center: new google.maps.LatLng(37.332495,-122.03056),
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },


                listeners: {
                    maprender: function(extMapComonent, googleMapComponent) {
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(37.332495,-122.03056),
                            title: 'Apple Computer, Inc.',
                            map: googleMapComponent,
                            animation: google.maps.Animation.DROP,
                        });
                    }
                }
            }
        ]
    }
});
    In HTML file's <head> section:
    Code:
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    Reply With Quote Reply With Quote
  4. 20 Aug 2012, 7:34 AM #3
    mitchellsimoens
    mitchellsimoens is offline
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,136
    Answers
    3983
    Vote Rating
    1429
      1  

    Default

    This works for me:

    Code:
    new Ext.Map({
    fullscreen : true,
    mapOptions : {
        zoomControl       : false,
        panControl        : false,
        rotateControl     : false,
        streetViewControl : false,
        mapTypeControl    : false,
        zoom              : 13,
        center            : new google.maps.LatLng(38.62452, -90.18514)
    }
});
    YOu have to be careful of using namespaces in properties like config objects as the Google API must be loaded before that class is defined.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens
    Reply With Quote Reply With Quote
  5. 4 Jan 2016, 8:02 AM #4
    rabia mahmood
    rabia mahmood is offline
    Sencha Premium Member
    Join Date
    Sep 2015
    Location
    UK
    Posts
    22
    Vote Rating
    0
      0  

    Default

    This works for me using Ext JS 6 - Modern.

    Thank you.
    Reply With Quote Reply With Quote
« Container scrolling problem for XTemplate (tpl) content | How to add different ICONS to List Items »

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules