{"id":744,"date":"2006-07-18T15:01:47","date_gmt":"2006-07-18T13:01:47","guid":{"rendered":"http:\/\/olbertz\/2006\/07\/18\/jquery-google-maps-ein-beispiel\/"},"modified":"2013-01-20T14:38:59","modified_gmt":"2013-01-20T13:38:59","slug":"jquery-google-maps-ein-beispiel","status":"publish","type":"post","link":"https:\/\/olbertz.de\/blog\/2006\/07\/18\/jquery-google-maps-ein-beispiel\/","title":{"rendered":"jQuery &amp; Google Maps: ein Beispiel"},"content":{"rendered":"<p><a href=\"http:\/\/www.olbertz.de\/archives\/jquery_googlemaps.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.olbertz.de\/archives\/jquery_googlemaps-thumb.png\" width=\"500\" height=\"264\" border=\"0\" \/><\/a><\/p>\n<p>Unter <a href=\"http:\/\/olbertz.de\/jquery\/googlemap.html\">olbertz.de\/jquery\/googlemap.html<\/a> habe ich mal ein kleines Beispiel f&#252;r das Zusammenspiel von <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> und <a href=\"http:\/\/www.google.com\/apis\/maps\/\">Google Maps<\/a> zusammen gestellt.<\/p>\n<p>Die HTML-Datei selbst enth&#228;lt kein Javascript, die Zuordnung von Aktionen (z.B. Mausklick) zu Java Script-Funktionen findet nur in <a href=\"http:\/\/olbertz.de\/jquery\/googlemap.js\">olbertz.de\/jquery\/googlemap.js<\/a> statt.<\/p>\n<p>Dabei muss ich eine Einschr&#228;nkung zugeben: ich habe es nicht geschafft, den onclick-Event f&#252;r die Links auf die Locations, die ich in der Funktion <tt>processLocations()<\/tt> erzeuge, mittel jQuery zu setzen. Damit hatte ich mich dann aber auch nicht mehr so lange auseinander gesetzt.<\/p>\n<p>Die <a href=\"locations_src.php\">locations.php<\/a> gibt, in JSON kodiert, die Daten aus der Datenbank zur&#252;ck an die Website und nimmt auch neue Locations entgegen. Das ganze wird mit den jQuery AJAX-Methoden <tt>$.get()<\/tt> und <tt>$.post()<\/tt> realisiert. Nach dem Aufruf erh&#228;lt die Callback-Funktion den Inhalt der R&#252;ckgabe (hier die Locations in JSON kodiert). Da es sich um JSOn handelt, werden die Daten durch ein einfach <tt>eval()<\/tt> von JS der Seite bekannt gemacht.<\/p>\n<p>Die Funktionalit&#228;t des Beispieles ist sehr einfach: Bei Klick auf die Locations in der Liste rechts, wird die Karte in der aktuellen Zoomstufe auf diese Location zentriert. &#220;ber <i>New<\/i> kann eine neue Location angelegt werden. Dazu klickt man einfach an der gew&#252;nschten Stelle auf die Map (erst <i>New<\/i> klicken!) und gibt ihr anschlie&#223;end einen Namen, bevor man sie mit <i>Save<\/i> in der Datenbank abspeichert. Es werden immer nur die letzten 10 Locations angezeigt.<\/p>\n<p>Die Quelltexte des Beispiel sind auf der <a href=\"http:\/\/olbertz.de\/jquery\/googlemap.html\">Demo-Seite<\/a> verlinkt.<\/p>\n<p>Ein klein wenig Statistik: Die Demo besteht aus insgesamt 145 Zeilen Code, die ich schreiben musste. Dabei entfallen 34 Zeilen auf HTML, 86 auf das Java Script und 25 auf PHP.<\/p>\n<p>(<strike>Warum die Demo-Seite nicht im Safari l&#228;uft, kann ich im Moment leider nicht beantworten.<\/strike> So, jetzt l&#228;uft&#8217;s auch mit Safari. Man sollte immer daran denken, ein <tt>&amp;lt\/script&amp;gt<\/tt> zu setzen, sonst ignoriert Safari die Zeile einfach.)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unter olbertz.de\/jquery\/googlemap.html habe ich mal ein kleines Beispiel f&#252;r das Zusammenspiel von jQuery und Google Maps zusammen gestellt. Die HTML-Datei selbst enth&#228;lt kein Javascript, die Zuordnung von Aktionen (z.B. Mausklick) zu Java Script-Funktionen findet nur in olbertz.de\/jquery\/googlemap.js statt. Dabei muss &hellip; <a href=\"https:\/\/olbertz.de\/blog\/2006\/07\/18\/jquery-google-maps-ein-beispiel\/\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[],"class_list":["post-744","post","type-post","status-publish","format-standard","hentry","category-technik"],"_links":{"self":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/comments?post=744"}],"version-history":[{"count":1,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/744\/revisions"}],"predecessor-version":[{"id":2018,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/744\/revisions\/2018"}],"wp:attachment":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/media?parent=744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/categories?post=744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/tags?post=744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}