1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    amritsharma is on a distinguished road

      0  

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

    Unanswered: 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

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      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>

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.