15. January 2010: Google-Maps Suche

Schon interessant, wie man manchmal bei eigentlich selbstverst├Ąndlichen Sachen forschen und tricksen muss. Zuletzt bei der Anzeige von diversen Adressen in einer Karte von Google-Maps. Hier sollte der Kartenausschnitt auf die angezeigten Ergebnisse zentriert und der Zoom entsprechend gesetzt werden. Standard-Funktionen gibt es daf├╝r leider nicht, aber mit einem kleinen Trick funktioniert es dennoch recht geschickt:

var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
map.setCenter(new GLatLng(25.783662, -80.189466), 9);
var viewport = new GLatLngBounds();
GEvent.addListener(map, 'markeradded', function(){
	map.setCenter(viewport.getCenter());
	map.setZoom(map.getBoundsZoomLevel(viewport)-1);
	});
geocoder.getLatLng("1900 N BAYSHORE DR  4109, Miami FL 33132", function(point){
	var marker = new GMarker(point);
	GEvent.addListener(marker, 'click', function(){
		marker.openInfoWindowHtml("1900 N BAYSHORE DR  4109, Miami FL 33132
Show Details"); }); map.addOverlay(marker); if(!viewport.contains(point)){ iewport.extend(point); } GEvent.trigger(map, 'markeradded'); });

Der Trick besteht darin im Eventhandler der Marker den hinzugef├╝gten Punkt einem GLatLngBounds-Objekt zu ├╝bergeben. Mit Hilfe dieses Objekts kann der Kartenausschnitt neu angepasst werden.

Interessant ist dabei, dass panTo() durch den direkt anschlie├čenden Aufruf von setZoom() nicht korrekt funktioniert. Mit setCenter() gibt es allerdings keine Probleme.