How do I set the center coordinates of a map?

**amritsharma** · 18 Aug 2012, 6:40 PM

{
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

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.

**pentool** · 18 Aug 2012, 10:49 PM

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>

**mitchellsimoens** · 20 Aug 2012, 7:34 AM

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.

**rabia mahmood** · 4 Jan 2016, 8:02 AM

This works for me using Ext JS 6 - Modern.

Thank you.

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

Thread Tools

Search Thread

Display

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

Tags for this Thread

Posting Permissions