PDA

View Full Version : Positioning Map Object



camerongray
8 Jun 2011, 9:52 AM
Hi,

I'm developing an app that contains a map and I would like to position the map so that it is centered around and has a marker in the position of a Latitude and Longitude that are each stored in their own variables. I'm hoping that there is a simple function that I can run to perform this task, I just can't find it anywhere.

Thanks in advance,
Cameron

fsjay
8 Jun 2011, 10:03 AM
var position = new google.maps.LatLng(40.3,-74.8734);

this.map = new Ext.Map({
mapOptions: {
center: position,
styleHtmlContent: true,
zoom: 12,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},


listeners: {


maprender: function (comp, map) {

var position = new google.maps.LatLng(40.3,-74.8734);

var marker = new google.maps.Marker({
position: position,
title: 'Washington Crossing',
map: map,
animation: google.maps.Animation.DROP,

});

}
}

camerongray
8 Jun 2011, 10:20 AM
Thanks, Is there a way to change the center of an existing map?

fsjay
8 Jun 2011, 10:54 AM
Yes.

You can use the panTo function of the GoogleMap Map object.

http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

panTo(latLng:LatLng) - Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.

I got confused originally playing with GoogleMaps and Sencha Touch...Sencha Touch has a map object that you must instantiate first, the use the GoogleMap's map, marker, etc objects and functions...

camerongray
8 Jun 2011, 10:58 AM
So am I correct with code like this:


latLng = new google.maps.LatLng(lat, long);

mapTab = new Ext.Map({
title: 'Map',
useCurrentLocation: true,
mapOptions: {
zoom: 12
}
});

//CODE BELOW RUNS WHEN I WANT TO CHANGE POSITION

mapTab.panTo(latLng);


Is that okay? - Expecially the last line. Or am I missing something?

fsjay
8 Jun 2011, 12:00 PM
Nope, I think thats it...It should do it automatically.

camerongray
8 Jun 2011, 12:09 PM
Thanks for your help!

camerongray
8 Jun 2011, 12:46 PM
hmm, Can't get it to work.

I'm running this code when I want to change the location:
latLng = new google.maps.LatLng(latOtherSide, longOtherSide);

mapTab.panTo(latLng);

The map has already been created with this code:
mapTab = new Ext.Map({
title: 'Map',
mapOptions: {
center: latLng,
styleHtmlContent: true,
zoom: 12,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
});

The map just remains on its default location, Mountain View California

fsjay
8 Jun 2011, 12:48 PM
How are you executing the code to re-position the map?

camerongray
8 Jun 2011, 12:50 PM
I have a button that runs a function that gets the latitude and longitude and then runs the panTo function

fsjay
8 Jun 2011, 12:53 PM
try:

mapTab.map.panTo();

camerongray
8 Jun 2011, 12:55 PM
You, Sir, are a genius! :D

fsjay
8 Jun 2011, 12:56 PM
Nah....I just remembered in the Examples section, there was a map example that did that.. :)

myput
29 Nov 2011, 2:35 AM
Hey, have you resolved your problem?

My code can't be centered by panTo because the map seems undefined with safari's console....
the error is:

TypeError: 'undefined' is not a function (evaluating 'map.panTo(new google.maps.LatLng(latitude, longitude))')

I do in my code:


addMap: function(latitude, longitude) {
var center = new google.maps.LatLng(latitude, longitude);
var map = new Ext.Map ({
mapOptions : {
center: center,
zoom : App.config._MapMapZoom,
mapTypeId: App.config._MapMapTypeId,
navigationControlOptions: {
style: App.config._MapNavigationStyle
}
},
listeners: {
maprender: function(comp, map) {
var marker = new google.maps.Marker ({
position: center,
map: map,
});
},
},
});
console.log(map);
map.panTo(center);
return map;
},



and i add the map returned to a panel.
In fact, the center seems good in the object, console.log(map) give me the good mapOption with good longitude and latitude.

but the map don't change the center ... I don't understand

can you help me please?