Im Rahmen meiner Tätigkeit komme ich immer wieder mit c00len Technologien in Berührung. In diesem Fall ist es Virtual Earth, ein Teil der Windows Live-Story. Ich kann nur empfehlen, sich bei Interesse, mit dem Virtual Earth SDK zu beschäftigen, welches wirklich einfach zu verwenden ist. Notwendige Voraussetzung sind Kenntnisse von HTML und JavaScript.
Das Virtual Earth Control kann in einem gewissen Rahmen, siehe VE API Terms of Use, kostenfrei auf öffentlichen Webseiten benutzt werden. Wenn Sie beispielsweise innerhalb von 24 Stunden über 100.000 Transaktionen an Virtual Earth Transaktikonen generieren, wird jedoch ein Vertrag benötigt. Möchten Sie Virtual Earth auch in diesem Fall verwenden, wenden Sie sich am Besten direkt an Microsoft Österreich.
Nachdem ich mich schon öfters über Webseiten von Lokalen/Geschäften geärgert habe, die keinen Anfahrtsplan anbieten, kam mir die Idee zu dem Shop-/Restaurant Finder. Also habe ich mich ein solches Teil implementiert. Das Ergebnis möchte ich Ihnen, liebe Leser, natürlich nicht vorenthalten, da ich hoffe, dass es auf Ihren Webseiten in Zukunft regen Einsatz findet *smile*. Hier sollte vielleicht nochmals erwähnt werden, dass dieses Teil nur aus HTML und JavaScript besteht und daher auch problemlos auf einer Webseite der "dunklen Seite" *lach* eingesetzt werden kann.
Der ShopFinder im Einsatz.
Wenn Sie die ZIP-Datei auf Ihren PC herunterladen finden Sie in dieser folgende Dateien:
- ShopFinder.htm... ShopFinder Beispiel
- ShopFinder.js... ShopFinder Javascript Logik
- ShopFinder.css... StyleSheet zu ShopFinder.htm
- PushPin.jpg... Demo-PushPin
Schneller Einsatz des ShopFinders
Wenn Sie den Shopfinder "as-is" einsetzen möchten, dann müssen Sie lediglich alle diese Dateien in ein virtuelles Verzeichnis auf Ihrem Webserver einspielen und ein paar Modifikationen in der Shopfinder.js-Datei durchführen. Dies sollte nicht mehr als 5 Minuten in Anspruch nehmen :-).
Öffnen Sie zunächst einfach einmal die Shopfinder.js Datei in einem Editor Ihrer Wahl:
var Error_ShopAdressMorePrecisely = "Please define your shopadress more precisely."
var myShopName = "Contoso"
var myShopDescription = "We do this and that. Please also visit our <a href='http://www.contoso.com'>branch office</a>!<br><img src='http://localhost:65451/ShopFinder/Images/PushPin.jpg' /> "
var myShopAddress = "Technologiestrasse 4,1120 Vienna, Austria"
var myShopPushPinImage= "http://localhost:65451/ShopFinder/Images/PushPin.jpg"
var myResultPrefix = "<B>Ihre Route</B>: <br />"
var myResultTotalDistancePrefix = "Total distance: "
var myZoomLevel = 18;
var myRouteListBoxHeight = 14;
... |
Ändern Sie die grün hinterlegten Werte:
- myShopName... Der Name Ihres Lokals/Geschäfts
- myShopDescription.. Eine kurze Beschreibung Ihres Lokals/Geschäft od. Adresse in HTML. Kann auch Bilder enthalten.
- myShopAddress... Die Adresse Ihres Lokals/Geschäfts. Diese muss eindeutig sein. Wenn diese nicht eindeutig ist wird das Script einen Fehler ausgeben.
- myShopPushPinImage... Eine URL zu der Bilddatei, die sie als PushPin auf der Karte verwenden möchten.
Fertig! Nun können Sie die Shopfinder-Webseite an surfen und Ihre Webseite verfügt über einen Lokal/Shopfinder.
Professioneller Einsatz des ShopFinders
Um den Shopfinder auf einer Ihrer publizierten Webseiten zu integrieren müssen Sie natürlich ebenfalls die JS-Datei wie oben angegeben modifizieren. Fügen Sie zu der Seite auf der der Shopfinder integriert werden soll die Scriptlibrary von Virtual Earth und ShopFinder hinzufügen:
<head>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js" mce_src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script src="ShopFinder.js" mce_src="ShopFinder.js"></script>
</head> |
Im Onload-Event Ihrer Seite muss die Methode "InitMap()" aufgerufen werden
| <body onload="InitMap();"> |
Außerdem benötigen Sie folgende Controls auf Ihrer Webseite. Wenn Sie die IDs der Controls verändern möchten, dann müssen Sie auch die Shopfinder.js-Datei entsprechend modifizieren. Um diesen Aufwand gering zu halten sind alle IDs in Membervariablen abgelegt, die einfach modifiziert werden können.
- DIV Control für die Karte
- <div id='myMap' style="width: 362px; height: 276px;"></div>
- Eingabefelder für die Start-Adresse:
- <input id="txtStreet" type="text" value="Oswaldgasse"/>
- <input id="txtHouseNr" type="text" value="3"/>
- <input id="txtPLZ" type="text" value="1120" />
- <input id="txtCity" type="text" value="Wien" />
- Schaltflächen für "Locate Shop on Map" und "Calculate Route"
- <input id="pbFindShop" type="button" value="Route ermitteln" onclick="javascript:FindShop()"/>
- <input id="pbFocusShop" type="button" value="Lokal anzeigen" onclick="javascript:FocusShop()" />
- DIV Control welches nach der Routenberechnung die Routensegmente (Waypoints) anzeigt
- <div id="divRouteResult" style="width: 100%"></div>
|
Download
Ressources
apollak
