Virtual Earth - Shop/Restaurant Finder (Plattformunabhängig)

2007-04-13T15:17:00Z

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:

Im Onload-Event Ihrer Seite muss die Methode "InitMap()" aufgerufen werden

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

ShopFinder mit Source Code

Ressources

Technorati tags: Virtual Earth, Web, ISV, Microsoft, Location based Services

apollak

A friendly "Hello" and Mark of the Web

2007-03-20T14:47:12Z

Hi everybody,

Since this is my first blog(entry), I start with a short introduction about my person.My name is Andreas Pollak and I work for Microsoft Austria as a developer evangelist for ISVs. In this role I am responsible to help our ISVs to leverage the new and innovative technologies that Microsoft brings constantly to the market. We are providing events, programs and in special cases proof of concepts implementations. One of our focuses is to provide a good Know-how transfer to our partners.

"Mark of Web" - Have you ever heard of this?

Although this existed a long time ago, I was not aware of this "feature" recently. Harald my colleague produced a CD that contained a HTML-, autorun.inf-file and a bunch of MP3 files. The primary idea was that the user who puts the CD in the drive gets the HTML presented and can choose which audio file she wants to play. I used to be one of the first lucky beta-testers and tired that with internet explorer. But each time I tried to hear the audio file by clicking on it, nothing did happen. Absolutely nothing! No error, no warning. As Internet explorer was not in the mood telling me why this happens I did some research and found the following article:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp

As I opened up the HTML-file in notepad I found a "mark of the web". Because Harald based the layout of the HTML on our blog-website, he first saved a draft of the webpage to his computer, thus implictly creating this tag with the url of our website. As soon as we removed this mark, the html worked as expected in IE.

Kind regards
Andreas

apollak

Andreas Pollak's (Blackgate) WebLog

Virtual Earth - Shop/Restaurant Finder (Plattformunabhängig)

Schneller Einsatz des ShopFinders

Professioneller Einsatz des ShopFinders

A friendly "Hello" and Mark of the Web