Google Routenplaner für eigene Website / Homepage @ tutorials.de: Tutorials, Forum & Hilfe

Jeder kennt wahrscheinlich die Google maps Karten die man auf seiner Website einbinden kann. Ich möchte hier einen etwas abgeänderten Weg zeigen um zum einen den Google Routenplaner mit einzubinden und gleichzeitig das Verlassen eurer Homepage zu verhindern.

Grundlage hierfür ist die Google API

Um nun wie auf meiner Beispielseite (Sotec Google Maps Beispiel) einen Routenplaner mit einzubinden der beim Klick auf "Route" ein neues Fenster mit dem Routenplaner und schon ausgefülltem Ziel öffnet ist wie folgt vorzugehen:

1.) Erstellt euch bei Google Maps ein ganz normale Karte und bindet sie auf der Website ein.

2.) Speichert euch zusätzlich die URL des Google Routenplaners mit eurem Zielort.

3.) Verändert nun den Code wie folgt:

Code :

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAIaITmlIHU11tsake5SyYIBTfnbiJ3AZdLHV1GCyeuie9Oa9W4hQn58RPycupi9TouGn5D3pC0KFTkg"
      type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
 
var map = null;
var geocoder = null;
var pointabs = new GLatLng(48.727307900406544,8.850173950195312);

Die Variable var text beschreib in meinem Beispiel den Text den ihr in der kleinen Sprechblase in der Google maps Karte seht. Hier kann je nach Wunsch per html/css z.B. auch ein Bild eingebunden werden.

Code :

1	var text = "<b>SOTEC</b> Software Entwicklungs GmbH + Co<br>Mikrocomputertechnik KG<br>Calwer Straße 11<br>D-75395 Ostelsheim<br /><br />

Hier müsst ihr nun den <a> tag mit der URL des Google Routenplaners und eurem Zielort einbinden. Mit target='_blank' öffnet ihr ihn in einem neuen Fenster.

Code :

<a href='http://maps.google.de/maps?daddr=Calwer+Strasse+11,+75395+Ostelsheim+(Sotec+Software+Entwicklungs+GmbH+%2B+Co)&geocode=3371268293612202208,48.727534,8.850089&dirflg=&saddr=&f=d&hl=de&dq=SOTEC&sll=48.73059,9.016175&sspn=0.251366,0.64888&cid=48727534,8850089,11535059465088755623&ie=UTF8&ll=51.248163,11.887207&spn=7.635285,20.76416&z=6&om=0' target='_blank'><u>Route</u></a>";

Code :

var marker = new GMarker(pointabs);
 
function load() {
 
if (GBrowserIsCompatible()) {
 
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(pointabs, 10);
 
map.addOverlay(marker);
marker.openInfoWindowHtml(text);
 
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
 
}
}
//]]>
</script></head>
<body onload="load()" onunload="GUnload()"><div id="map" style="width: 530px; height: 450px;"></div>
</body></html>

Wenn ihr nun alles so integiert habt ist auf der Google Karte eurer Website ein Link "Route" zu sehen (Beipielkarte Sotec Software Entwicklung GmbH) und ihr werdet mit einen klick darauf in einen neuen Browser Fenster zu Google maps weitergeleitet (Beispielroute zu Sotec Software Entwicklungs GmbH)

Um einen überblick zu bekommen hier nochmal der komplette code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SOTEC: Karte</title>
<!--START head//-->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Der Dirigent 01.00.04 / www.der-dirigent.de" />
<meta name="author" content="SOTEC Software Entwicklungs GmbH" />
<meta name="description" content="Kontaktformular, Karte, Kontakt" />
<meta name="keywords" content="Kontaktformular, Karte, Kontakt" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="cms/css/sotec.css" type="text/css" />
<script src="cms/js/sotec.js" type="text/javascript"></script>
<!--END head//-->

<link rel="shortcut icon" href="favicon.ico" >
</head>
<body onload="onload_js()">

</dedi:lay>
<div id="page">
<div id="logo"><a href="http://www.sotec.eu"><img src="media/img/soteclogo.png" alt="SOTEC" border="0" height="45" width="180"></a></div>
<form id="Form1" action="index.php?idcatside=86&amp;view=preview" method="post">			
<div id="helpmenu">
</dedi:lay>
<!--START 22//--><b><a href="index.php?idcatside=147&lang=8">english</a></b> : <!--END 22//--></dedi:lay>	
<!--START 21//-->search:
<input type='text' name='suche' value='' class='suchfeld' /> <input type="image" src="media/img/nav/suchen.png" alt="suche" /><input type='hidden' name='w_70' value='B.title' />

<input type='hidden' name='w_71' value='B.summary' />
<input type='hidden' name='w_72' value='B.meta_description' />
<input type='hidden' name='w_73' value='B.meta_keywords' />
<input type='hidden' name='w_74' value='A.value' />
<input type='hidden' name='what' value='body' />

<input type='hidden' name='how' value='OR' />

<input type='hidden' name='sort' value='C.idcatside' />

<input type='hidden' name='page' value='1' /><input type='hidden' name='modus' value='1'/><!--END 21//--></dedi:lay>				
</div>
</form>
<br class="clear">
<div id="mainmenu"><!--START 8//--><div id="topmenu"><a href="index.php?idcat=29" class="topmenufont">Entwicklung & Beratung</a><a href="index.php?idcat=39" class="topmenufont">Referenzen & Partner</a><a href="index.php?idcat=31" class="topmenufont">Unternehmen</a><a href="index.php?idcat=37" class="topmenufont">Kontakt</a> </div><!--END 8//--></dedi:lay></div>

<div id="kopfzeile">

<div id="logo2"><!--START 25//--><img src="http://www.sotec-net.de/cms2/internet/media/img/kopfzeile/links_oben_kont.png" alt="SOTEC.EU Banner oben" width="240" height="150"  /><!--END 25//--></div>
<div id="logo3"><!--START 23//--><img src="http://www.sotec-net.de/cms2/internet/media/img/kopfzeile/kont.jpg" alt="SOTEC.EU Banner oben" width="540" height="150"  /><!--END 23//--></div>
</div>
<br class="clear">
<br>
<div id="leftmenu"><!--START 7//--> <a href="index.php?idcatside=148"  class="navi2">Kontaktformular</a><a href="index.php?idcatside=147"  class="navi2-aktiv">Karte</a> <!--END 7//--></dedi:lay></div>
<div id="content2" ><!--START 1//--><html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml"><title>mapstest</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAIaITmlIHU11tsake5SyYIBTfnbiJ3AZdLHV1GCyeuie9Oa9W4hQn58RPycupi9TouGn5D3pC0KFTkg"
      type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

var map = null;
var geocoder = null;
var pointabs = new GLatLng(48.727307900406544,8.850173950195312);
var text = "<b>SOTEC</b> Software Entwicklungs GmbH + Co<br>Mikrocomputertechnik KG<br>Calwer Straße 11<br>D-75395 Ostelsheim<br /><br /><a href='http://maps.google.de/maps?daddr=Calwer+Strasse+11,+75395+Ostelsheim+(Sotec+Software+Entwicklungs+GmbH+%2B+Co)&geocode=3371268293612202208,48.727534,8.850089&dirflg=&saddr=&f=d&hl=de&dq=SOTEC&sll=48.73059,9.016175&sspn=0.251366,0.64888&cid=48727534,8850089,11535059465088755623&ie=UTF8&ll=51.248163,11.887207&spn=7.635285,20.76416&z=6&om=0' target='_blank'><u>Route</u></a>";
var marker = new GMarker(pointabs);

function load() {

if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(pointabs, 10);

map.addOverlay(marker);
marker.openInfoWindowHtml(text);

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});

}
}
//]]>

</script></head>
<body onload="load()" onunload="GUnload()"><div id="map" style="width: 530px; height: 450px;"></div>
</body></html><!--END 1//--></dedi:lay></div>
<br class="clear">
<div id="content2" ></dedi:lay></div>
<div id="content2"></div>
<br class="clear">
<div id="footer" valign="middle">
<a href="http://www.sotec.eu">Home</a> : <a href="index.php?idcatside=89">Impressum</a> : <a href="index.php?idcat=37">Kontakt</a> : © SOTEC 2007</div>

</div>
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>
<script type="text/javascript">
_uacct = "UA-1407492-1";
if (typeof(urchinTracker) == 'function') {
  urchinTracker();
}
</script>
</body>
</html>

Noch eine kleine Ergänzung:

Wie füge ich meinen Firmennamen oder zusätzliche Infos in den Rroutenplaner ein:

1. Google Routenplaner aufrufen und Zieladresse eingeben => Karte ohne Firmenname erscheint.

2. Klick auf "URL zu dieser Seite" => Link in folgender Form:

http://maps.google.de/maps?f=d&hl=de...8&ie=UTF8&z=16

Beispieladresse zu einem McDonald's Restaurant ohne Titel/Firmenname

3. Um nun meinen Firmennamen oder Ähnliches einzufügen, kann ich wie folgt editieren:

Bsp Titel oder Firmenname:

"McDonald's Restaurant"

http://maps.google.de/maps?f=d&hl=de...3+Sindelfingen+(McDonald's+Restaurant)&sll=48.70559,9.000163&sspn=0.006953,0.023518&ie=UTF8&z=16

Beispieladresse zu einem McDonald's Restaurant mit eingefügtem Titel/Firmenname

Auch denkbar ist ein ein mehrzeiliger Text z.B.:

Code :

[B][url]http://maps.google.de/maps?f=d&hl=de&geocode=&saddr=&daddr=Mercedesstr.+12,+71063+Sindelfingen[/url][COLOR="Red"]+(McDonald's+Restaurant+-+SOTEC:%20Restaurant%20Production%20Software%20seit%2025%20Jahren)[/COLOR]&sll=48.70559,9.000163&sspn=0.006953,0.023518&ie=UTF8&z=16"[/B]

Beispieladresse mit Restaurant Production Werbetext

2 Kommentare

wollmaus - 20.08.11, 18:18

Bliebe zu erwähnen dass man sich für dein Beispiel einen Google-Account incl. key für Google-Maps zulegen muss, da du die seit geraumer Zeit als deprecated eingestufte V2 nutzt. V3 bietet nicht nur mehr Service & Performance, sondern benötigt auch keine Authentifizierung mehr.

Antworten

Tilo Fendt - 19.10.11, 15:21

Ein fertiges Routenplaner Widget mit fester Zieladresse gibt es auch hier (statt Karte oder zusätzlich): http://www.routenplaner-kostenlos.co...ge_widgets.php

Antworten

Kommentar schreiben

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Webmaster & Internet

Google Routenplaner für eigene Website / Homepage

Artikel bewerten

tutorials.de-Systemmitteilung

Login

Bereiche

Kategorien

Forum - Webmaster & Internet

Eigene Icon Font erstellen und per @font-face einbinden?

Typo3 Bilder skalieren gehr nicht + weitere Frage

AW: Event bei Klick auf bestimmte Stelle auf Webseite

AW: Email in JS senden

AW: Email in JS senden

Newsletter @ tutorials.de

Nützliches

E-Mail:
Abonnieren Abbestellen