gmap – Das jQuery Plug-in für Google Maps anpassen

Google Maps

Vor ein paar Tagen wurde ich auf ein interessantes Plug-In für jQuery aufmerksam gemacht. gmap ermöglicht ein leichtes einbinden der Google Maps auf die eigene Webseite. Es können zahlreiche Einstellungen getroffen werden, wie Markerposition, Markericon, Markergröße, Markerschatten und Tooltips. Ich war also rundum glücklich.

Jedoch weist das Plug-In an einigen Stellen ein etwas undurchdachtes Verhalten auf. So wir bei mehreren Markern immer nach dem ersten Marker zentriert. Das ist aus meiner Sich nicht wirklich logisch. Schließlich möchte man dem Besucher möglichst alle Veranstaltungsorte ausgeben oder selbst eine Position bestimmen zu können.

Demzufolge müsste man das Plug-In so umschreibe, dass sich alle Marker im sichtbaren Bereich befinden und die Zoom-Stufe automatisch angepasst wird. Google Maps bietet solche Funktionen bereits von Haus auf an, sodass diese einfach dem Plug-In beigefügt werden müssen.

Dazu müssen wir die Zeilen 31 – 33 mit dem folgenden Code ersetzen:

$gmap.setCenter( new GLatLng( 0, 0 ), 0 );
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < opts.markers.length; i++ )
{
  latlngbounds.extend(new GLatLng(opts.markers[i].latitude, opts.markers[i].longitude));
}
$gmap.setCenter( latlngbounds.getCenter( ),  Math.min(13, $gmap.getBoundsZoomLevel( latlngbounds ) ) );

Google kümmert sich ab nun immer um die richtige Zoom-Stufe, um immer alle Marker im Blick zu haben.

Möchte man trotzdem auch selbst über die Positionierung der Map und die Zoom-Stufe bestimmen, so ist auch dies kein Problem. Ich habe das zusätzlich so erweitert, dass man die Map an einem bestimmten Punkt zentrieren und die Zoom-Stuffe bestimmen kann, wenn die Variable „manual“ auf „true“ gesetzt ist. Dafür müssen die Zeilen 31 – 33 folgendermaßen ersetzt werden:

if (opts.manual == true)
{
  $gmap.setCenter(new GLatLng(opts.lat, opts.lng), opts.zoom);
}
else
{
  $gmap.setCenter( new GLatLng( 0, 0 ), 0 );
  var latlngbounds = new GLatLngBounds( );
  for ( var i = 0; i < opts.markers.length; i++ )
  {
    latlngbounds.extend(new GLatLng(opts.markers[i].latitude, opts.markers[i].longitude));
  }
  $gmap.setCenter( latlngbounds.getCenter( ),  Math.min(13, $gmap.getBoundsZoomLevel( latlngbounds ) ) );
  }

Jetzt müssen nur noch die Variablen „lat“, „lng“ und „zoom“ in dem JSON-String gesetzt werden.

Beispiel:

$("#meineMap").gMap({
  controls: GSmallMapControl,
  scrollwheel: true,
  maptype: G_NORMAL_MAP,
  lat: 53.4692536,
  lng: 9.885319,
  zoom: 12,
  manual: true,
  markers:[
    {
      html: "Tooltip Inhalt",
      latitude: 53.4692536,
      longitude: 9.888319,
      icon:
      {
        image: "pfad/zum/icon.png",
        iconsize: [41, 38],
        iconanchor: [41, 38],
        infowindowanchor: [22, 8]
      }
    },
    {
      // Weitere Marker
    }
  ]
});
ALL-INKL.COM