Google Maps Routen mit jQuery in Shadowbox anzeigen

Dem Besucher die Möglichkeit zu geben die Anfahrt zu einem Unternehmensstandort berechnen zu lassen ist heut zu tage ein muss für jede Unternehmens Webseite. Unschön ist ein weiteres Fenster / Pop-Up das sich öffnet nur um eine Anfahrtsskizze über die Google Maps Funktion anzuzeigen. Im selben Fenster wollen wir Google Maps nicht öffnen. Wir wollen den Besucher nicht von der Webseite weg manövrieren.

Ein Lösungsvorschlag von mir ist das öffnen von Google Maps in einer Highlighting-Box wie der Shadowbox. Als angenehm empfunden haben viele Besucher einen zweiten Link für die Google Routen Berechnung. Bei den Vorhaben seine Anfahrtsroute zu berechnen sollte man dem Besucher nicht im Interface / Platz beschneiden.

Hierzu habe ich mithilfe von jQuery ein kleines Script geschrieben, das am besten in den Header des Dokumentes, nach dem jQuery Framework und der Shadowbox, eingebunden wird. Ein paar HTML Elemente müssen wir ebenfalls auf der Webseite platzieren um dem Besucher Interaktion zu ermöglichen.

Das Beispiel auf dieser Seite beeinhaltet die Anzeige der Anfahrt, dargestellt in der Shadowbox, ins Watergate nach Berlin.

Anfahrt anzeigen • Route berechnen

Die Einrichtung um Google Maps in der Shadowbox öffnen zu lassen gestaltet sich, wenn man weiß wie, sehr einfach.
Das jQuery Framework und die Shadowbox müssen vor Script Aufruf in das HTML Dokument eingebunden werden. Dies geschieht im Kopfbereich folgerndermaßen:

<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="shadowbox.js" type="text/javascript"></script>

Aktuelle Downloads findest du hier:

• jQuery Framework
• Shadowbox

Dieses Script bindet das „click“ Event an den Link und macht es uns möglich nach einem Klick eines Benutzers mit einer eigenen Funktion zu reagieren. In unserer Funktion werden wird der Wert des Formularfeldes ermittelt und als GET Parameter (Adresse) für den iFrame der Shadowbox verwendet.

Das zweite „click“ Event öffnet ein neues Fenster / Tab mit der Adresse aus dem Formularfeld für die Google Routen Berechnung.

jQuery(document).ready(function() {
   Shadowbox.init({
       handleOversize: 'drag',
       modal: true
   });
   jQuery('#google-route-b').bind('click', function() {
       Shadowbox.open({
	   content: jQuery(this).attr('href')+jQuery('#google-route-f').attr('value'),
  	   player:  'iframe'
      });
      return false;
   });
   jQuery('#google-route-d').bind('click', function() {
	jQuery(this).attr('href', jQuery(this).attr('href')+jQuery('#google-route-f').attr('value'));
	return true;
   });
});

Der Selektor #google-route-b steht hierbei für den Link auf den geklickt werden muss um unser „Formular“ abzusenden. #google-route-f bezeichnet das Feld mit der Adresse des Besuchers. Die Rückgabe von „false“ am Ende der Funktion verhindert das öffnen von den Google Routen im selben Fenster.

#google-route-d kennzeichnet den Link um die Google Routen Berechnung. Nach dem Einfügen der Adresse aus dem Input Feld in den Link wird „true“ zurück gegeben um dem Browser zu signalisieren weiter mit seiner standard Link Routine zu arbeiten.

<input type="text" name="saddr" title="Ihre Adresse" class="input-text" id="google-route-f">
<a href="http://maps.google.de?daddr=***DEINE STRAßE, DEINE STADT***&amp;&output=embed&saddr=" title="Anfahrt anzeigen" id="google-route-b" target="_blank">Anfahrt anzeigen</a>
<a href="http://maps.google.de?daddr=***DEINE STRAßE, DEINE STADT***&amp;saddr=" title="Route berechnen" id="google-route-d" target="_blank">Route berechnen</a>

***DEINE STRAßE, DEINE STADT*** ist natürlich durch die jeweilige Firmenadresse zu ersetzen.