Google Maps hat jetzt eine JavaScript API in der dritten Version. Ich erinnere mich, dass ich mit einer Version der API in v2 herumgespielt habe und dachte, sie sei ziemlich cool, aber etwas schwerfällig. Zum einen erfordert v3 keine Beantragung eines API-Schlüssels mehr, was gut ist.
Ich bin sicher, es liegt teilweise daran, dass ich besser in JavaScript geworden bin, aber ich fand die API sehr gut gemacht und einfach zu bedienen. Zum einen ist sie vollständig ereignisgesteuert. Das bedeutet, dass Sie Ereignis-Listener an verschiedene Dinge anhängen können, wie z. B. die Karte selbst oder Dinge innerhalb der Karte. Ein einfaches Beispiel wäre, wenn auf einen Marker geklickt wird, können Sie die Zoomstufe der Karte ändern, Informationen anzeigen, die woanders auf der Seite stehen, oder wirklich alles andere, was Sie mit JavaScript tun möchten.
Sie ist nicht nur ereignisgesteuert für die Verarbeitung von Dingen innerhalb der Karte, sondern die Objekte, die Sie zum Erstellen der Karte und der darin enthaltenen Elemente verwenden, sind voller Methoden zur Steuerung. Dies erleichtert die Steuerung der Karte durch Ereignisse, die woanders auf Ihrer Seite auftreten.
Ich beschloss, ein wenig damit zu spielen und etwas zu bauen.
Demo anzeigen Dateien herunterladen
Ich habe jQuery zur Hilfe genommen, aber das ist definitiv nicht zwingend erforderlich.
Ich habe eine Liste von Orten in einer unsortierten Liste erstellt. Jeder Listeneintrag hatte HTML5-Datenattribute, die seine Breite und Länge enthielten. Er enthielt auch einen Titel sowie lange und kurze Beschreibungen.
<li data-geo-lat="41.9786" data-geo-long="-87.9047">
<h3>O'Hare Airport</h3>
<p>Flights n' stuff</p>
<p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine's 2009 "America's Favorite Cities" ranked Chicago's Airport System (O'Hare and Midway) the second-worst for delays, New York City's airport system (JFK, Newark Liberty, and LaGuardia) being the first.</p>
</li>Wenn über einen dieser Listeneinträge gefahren wird, wende ich eine "hover"-Klasse an, um das Styling zu handhaben, schwenke die Karte zu den neuen Koordinaten und fülle den rechten Bereich mit weiteren Informationen.
Es ist alles ziemlich unkompliziert und weiter kommentiert zur Klärung. Das Hinzufügen/Bearbeiten von Punkten ist so einfach wie das Ändern von Koordinaten und Text direkt im HTML-Teil.
Idee
Die Idee kam von dieser Website, die ich in einem Tweet von ilovetypography gefunden habe.
Das ist eine großartige Möglichkeit, verschiedene Punkte in einem geografischen Gebiet anzuzeigen, eine solche Kartenimplementierung habe ich noch nie gesehen. Daumen hoch!
Chris,
Ich nutze Zoho Creator, um Informationen zu sammeln und Benutzer zu verschiedenen Orten auf der ganzen Welt zu leiten. Gibt es eine Möglichkeit, dies mit Zoho Creator oder einer ähnlichen Webseite zum Laufen zu bringen?
Ich liebe es, danke fürs Teilen!
Perfekte Zeitplanung, mal wieder! Ich steige gerade in die Maps API ein, nachdem ich das NetTuts-Tutorial gelesen habe. Das einzige Problem ist, dass das NetTuts-Tutorial auf V2 der API basiert.
Danke!
Liebe das Tutorial... und Pequod's!
Mann, das ist krass! Du kriegst den verdammten Award des Tages.
Schade, dass in diesem Tutorial keine Option für den Fall gibt, dass JavaScript nicht aktiviert ist. Vielleicht eine statische Google-Karte – Design für alle…
Sie bieten eine "statische Karte"-API an, die kein JavaScript benötigt. Wenn Sie also daran interessiert sind und Fallbacks erstellen möchten, schauen Sie sich das an.
Was passiert, wenn Sie zu einem Eintrag in Oregon geschwenkt haben?
Es zoomt einfach sofort statt zu schwenken. Sie können den Effekt sehen, indem Sie nah an einen dieser Punkte heranzoomen und über andere fahren. Die Grenze ist die aktuelle Breite der Karte.
Ich habe mit einer Google-Karte gearbeitet und die Geocodes so erhalten, dass ich einfach den Ort auf Google Maps eingegeben habe. Wenn Sie z. B. "Portland Oregon" eingeben, wird eine Sprechblase auf der Karte angezeigt. Wenn Sie dann mit der rechten Maustaste auf diese Sprechblase klicken und "Was ist hier" auswählen, wird der Text von "Portland Oregon" in den Geocode geändert. Probieren Sie das mal.
Ja, ein weiteres großartiges Beispiel, Chris. Ich habe mir neulich ein Video von Google über v3 angesehen. Es ging darum, wie Kacheln innerhalb der API gerendert wurden, was sehr langsam sein konnte, wenn Sie mehrere Punkte über große Entfernungen haben. Ihr Beispiel sind vielleicht 6 Kacheln, ich weiß es nicht, und wenn Sie 6 Pins über jede der 6 Kacheln auf dem Raster platzieren würden, wäre es langsam. Was der Sprecher sagte, um die Geschwindigkeit zu verbessern, war, dass man eine Ebene von divs zeichnen und sie darauf integrieren könnte, was es im Konzept viel statischer macht.
Viel schöne Theorie, aber die Umsetzung ist eine andere.
Schönes schönes Beispiel. Danke!
Das ist eine wirklich coole Lösung zur Implementierung von Google Maps. Danke fürs Teilen der Idee, Chris!
Hallo Chris, schöner Blog. Ich nutze Google Maps derzeit auf all meinen Websites und es gibt ein ziemlich cooles Verfahren, um viele wichtige Informationen dort unterzubringen. Ich habe mir noch nicht angesehen, was wir mit der API machen können, aber es sieht großartig aus, wenn man das Aussehen der Pins usw. ändern kann.
Hallo Chris,
Diese API ist wirklich süß! Sehr nützlich. Kann man die API auch auf Karten verwenden, die nicht von Google stammen? Sagen wir, man braucht so etwas auf einer Karte einer Einkaufshalle oder eines Vergnügungsparks? Nur ein Gedanke. Habe nach etwas Ähnlichem gesucht, bin aber immer bei einer Google-Karte gelandet, anstatt bei einer benutzerdefinierten Karte.
Viele Grüße,
Pioter
Auf jeden Fall.
http://gmaps-samples-v3.googlecode.com/svn/trunk/planetary-maptypes/planetary-maptypes.html
Fantastisch...
Danke..
Sehr cool, gute Arbeit. Haben Sie Kontrolle über die Geschwindigkeit des Schwenkens? Für meine Augen ist es ein bisschen zu schnell.
Ich glaube nicht, dass es steuerbar ist. Die Methode .panTo nimmt nur einen Parameter und das ist LatLong
Ich frage mich, ob es machbar wäre, eine Countdown-Timer-Funktion zu erstellen, die sequenziell eine gestufte LatLong-Variable basierend auf der Differenz zwischen dem aktuellen Punkt und einem Zielpunkt und der gewünschten Animationszeit übergibt.
Natürlich gehe ich nur von einem linearen Übergang aus. Das Easing könnte zu verrückt für mein Verständnis sein. Außerdem ist dies vielleicht keine gute Lösung, wenn man ständig Aufrufe an Googles Server machen muss, wohingegen es besser wäre, wenn es zwischengespeichert wäre... nur vielleicht. Vielleicht werde ich es eines Tages versuchen.
Chris,
Fantastische Informationen mit Demo und Download.
Dieses HTML wird mir helfen.
Vielen Dank.
Sehr gut, wir werden tatsächlich eine Web-App mit der Google Map API entwickeln. Das hat definitiv Licht ins Dunkel gebracht. Danke.
Das ist wirklich lecker! Ausgezeichnete Arbeit, Chris, und danke fürs Teilen!
Das ist nützliches Zeug. Sehr gut gemacht!
Sehr fantastisch!
Völlig kein Webdesign, aber... nichts geht über das gute alte Chicago :)
Einer dieser Orte ist ganz in der Nähe meines Praktikums…
Und jetzt muss ich vielleicht auch mal diese Pequod's Pizza ausprobieren…
Hallo Chris,
Das ist großartig, und die Karte ist wirklich reaktionsschnell!
Ich habe mir kürzlich auch die Maps API angesehen und eine Seite zusammengestellt, auf der Tweets mit Geolokalisierungsinformationen auf einer Karte platziert werden. Die V3 API hat es ziemlich einfach gemacht.
http://www.pabloestrada.us/worldcup/
Ich werde mir Ihren Code ansehen, um zu sehen, wie ich meinen verbessern kann ;)
Danke, Chris! Perfekte Lösung für eine Seite, die ich gerade wireframe.
Nur eine Frage... haben Sie die Pizza von Eduardo auf Howard probiert? Tiefkasten-Spinat-Kuchen war unser Favorit. :)
Nur eine kurze Anmerkung: Wenn man mehrmals heranzoomt und dann über die Elemente fährt, funktioniert das Schwenken immer noch, aber der erste funktioniert nicht.
Wenn man etwas mehr als die Standardzoomstufe heranzoomt, ist der Wechsel von oder zum O'Hare Airport sofort ohne Animation.
Frage: Ist es möglich, die Zoomstufe einzustellen? D.h. von einem Nahbereich A zu einem ausgezoomten Bereich B zu wechseln?
Gerade wenn man denkt, Google kann nicht besser werden, kommen sie immer wieder mit neuen großartigen Ideen. Das ist wirklich cool! Ich kann es kaum erwarten, zu sehen, was sie als nächstes entwickeln werden.
Danke. Können Sie weitere Details liefern????
Im Code gibt es einen Verweis auf eine Datei example.js,
[ ]
aber sie ist nicht im Download enthalten.
Das wäre eine großartige App.
Ich möchte lernen, wie man die API benutzt. Ich hoffe, es ist einfach zu verstehen.
Danke!
Das ist sehr cool. Danke, Chris!
Ausgezeichnete Arbeit, Chris, ich habe es mit meinen eigenen Koordinaten ausprobiert und es funktioniert perfekt, nur mit einem kleinen Problem: Das Schwenken funktioniert nur, wenn die Punkte nahe beieinander liegen. Sobald sie weiter als ein voller Rahmen entfernt sind, springen sie einfach. Wissen Sie, wie man das arrangiert? Das würde es perfekt machen... Ich stelle auch fest, dass dasselbe passiert, wenn man zoomt, da der Abstand zwischen den Punkten größer wird, so dass es nicht mehr schwenken kann. Auf jeden Fall ausgezeichnete Arbeit. Danke!!!
Ich mag es sehr! Aber ich habe eine Frage: Kann ich damit meine Seiten bei Google gut positionieren?
Ich möchte eine Webseite erstellen, die bei Google gut positioniert ist, und ich weiß nicht, ob ich das damit tun kann.
Danke
Esther
Ich habe ein Beispiel für eine Google-Karte, um Anweisungen mit v3 zu erhalten, aber ich kann nicht herausfinden, wie die Karte zu ihrem ursprünglichen Ausgangspunkt zurückkehrt, wenn man das Textfeld löscht.
Hat jemand eine Idee?
Es ist ein grobes Layout, aber versuchen Sie, Ihre Adresse einzugeben. Alles funktioniert, außer der Rückkehr zum Ausgangspunkt.
http://dev-steele.designvsdevelop.com/index.php?option=com_vehicles&view=vehicles&id=26&Itemid=6
Das ist mit Abstand eine der schönsten Apps, die ich je gesehen habe.
Die Implementierung ist einfach und die Codes sind vielseitig.
Ich habe den Titel aktiviert, um dem Marker einen Tooltip zu geben…
Beispiel wie folgt
Meine Implementierung
Chris, du machst meinen Tag!! Danke!
Wow! Wirklich coole Implementierung hier! Tolle Arbeit, Chris' Code auf ein höheres Niveau zu heben.
sieht gut aus! Ich habe nach so etwas gesucht. Ich habe nur ein Problem. Die Orte, die ich verwenden werde, sind dynamisch aus einer Datenbank. In dieser Datenbank gibt es keine Koordinaten. Ich frage mich, ob es auch mit einer Adresse gemacht werden kann.
Verzeihen Sie meine Rechtschreibung, mein Englisch ist nicht so gut
Ich freue mich, wenn Sie etwas darüber wissen
Problem gelöst ;)
Großartig, ich werde es auf meiner Website verwenden. Ich brauchte das. Danke Chris, du rockst
Ich denke, es ist sehr nützlich für uns. Es gefällt mir. Dieser Artikel wird mir helfen.
Nützliche Informationen für uns… Wenn die Leute also erfahren, dass Google Maps eine API für seine Produkte für Mobiltelefone veröffentlicht hat, werden sie sicher anfangen, Mobiltelefone mit JavaScript-fähigen Mobiltelefonen zu kaufen…
Venkatesh – Gulfwebstudio.com
Hallo Freund,
Ich habe Ihre Seite zufällig gefunden und es wird Sie nicht überraschen, den Kontext dieses Briefes, denn ich bin Brasilianer und benutze Google Translate, rs. Ich weiß, dass es seltsam ist, dass ich Sie frage, aber haben Sie zufällig ein Beispiel für eine Tabelle, die komplett in CSS gemacht ist? Ich suche schon seit Tagen danach.
Ich habe die Routine in zwei Teile geteilt und versucht, sie in CSS laufen zu lassen
Wählen Sie den gewünschten Mitarbeiter aus, um die Skala zu erstellen…
<option value="cadastro_escaladofuncionario.php?id_funcionario=”>
0) {
mysql_data_seek($rsEscalaDoFuncionario, 0);
$row_rsEscalaDoFuncionario = mysql_fetch_assoc($rsEscalaDoFuncionario);
$funcionariocorrente = $row_rsEscalaDoFuncionario[‘id_funcionario’];
$nomedofuncionariocorrente = $row_rsEscalaDoFuncionario[‘nomecompleto’];
}
?>
Ich wünschte, Sie würden sich die Routine ansehen und mir helfen, einen Ausweg zu finden. Das Beste, was ich bekommen habe, war, das in PHP einzufügen, aber dieses Formular möchte ich in CSS haben.
Eine dicke Umarmung!
Sehr schöne Implementierung! Tolle Arbeit. Ich verwende viele Snippets von css-tricks auf meinen Seiten, vielleicht werde ich dieses Snippet auch irgendwo verwenden, habe nur noch nicht den richtigen Platz dafür gefunden ^^
Tolle Anstrengung….. Noch nie zuvor gesehen…..
Bester Weg, um mehrere Orte mit Details anzuzeigen…
Zwei Daumen hoch für dich, MAN….
Wie kann ich eine KML einfügen?
Danke
Hallo Chris! Schönes Tutorial! Es ist perfekt für das, was ich brauche, aber ich muss Infowindows hinzufügen. Ich habe es geschafft, sie hinzuzufügen, aber wenn die Karte zum nächsten Ort schwenkt, bleibt das Infowindow geöffnet. Wie würden Sie diese Infowindows implementieren? Danke!
Es gefällt mir wirklich gut! Aber ich habe eine Frage: Wie verbindet man den Code mit WP?
Danke
RodgerFox
Alle Dateien mit der Seite verbinden. Zeigt den Namen und die Beschreibung der Orte an. Aber die Karte wird nicht angezeigt, helfen Sie mir bitte.
Funktioniert bei mir auf WordPress. Aber… der Beschreibungstext wird dupliziert. Seltsames Problem. :(
Kann jemand bestätigen, dass dies in IE funktioniert? Danke.
schönes Tutorial, wie man das in WordPress macht
Hallo. Zuerst einmal vielen Dank dafür, ich liebe es. Ich habe eine Frage. Was ist, wenn ich mehrere Standorte habe, aber die Abmessungen der Leinwand mit der Karte und den Details beibehalten möchte? Ich meine, kann ich etwas tun, um die Liste der Standorte innerhalb der Abmessungen der Leinwand mit diesen Abmessungen scrollen zu lassen. Wie mache ich das? Vielen Dank.