PDA

View Full Version : GMapPanel - Marker not displaying and Map not moving



jnjc
18 Jul 2012, 10:55 PM
Hi,

I have put together a test, using an input element and gMapPanel in a window. The input box acts as an autocomplete for the address on the map. Once the address is changed I want the map to add a marker on the address and re-position the map. The autocomplete is working, but after an address is selected the map does not add the marker or reposition (the trigger is firing). Having said that if I click the zoom out button, when the map refreshes it is in the correct location (but still no marker).

Any ideas as to why the marker isn't appearing ? Anybody know how to force the map to refresh/ re-render ?

Thanks,
JC


extMap = new Ext.ux.GMapPanel({
anchor: '100% -40',
zoomLevel: 14,
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
}
}
);


mapwin1 = new Ext.Window({
width: 500,
height: 400,
title: "AnchorLayout Panel",
layout: 'anchor',
items: [{
xtype: 'panel',
frame:true,
anchor: '100%',
height:40,
layout:'anchor',
html:"<div><input id='longLat' name='longLat' /></div>"
},extMap]
});



mapwin1.show();
var input = document.getElementById('longLat');

autocomplete = new google.maps.places.Autocomplete(input);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
extMap.addMarker(place.geometry.location,{lat:place.geometry.location.lat(),
lng:place.geometry.location.lng()},
true, true);
});

scottmartin
20 Jul 2012, 2:37 PM
Moved thread to Help. Plugins is for releasing plugins.

Regards,
Scott.

jnjc
23 Jul 2012, 2:27 AM
Hi All,

After lots of trial and error I got this working. The code is below.

Thanks,
JC


google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var point = extMap.fixLatLng(new GLatLng(place.geometry.location.lat(),
place.geometry.location.lng()));
extMap.addMarker(point,{lat:place.geometry.location.lat(),
'lng':place.geometry.location.lng()},
true, true);

});