The Blog that never sleeps

Olbertz.de

  • Author: Dirk Olbertz
  • Published: Jul 18th, 2006
  • Category: Allgemeines
  • Comments: None

jQuery & Google Maps: ein Beispiel

TAGS: None

Unter olbertz.de/jquery/googlemap.html habe ich mal ein kleines Beispiel für das Zusammenspiel von jQuery und Google Maps zusammen gestellt.

Die HTML-Datei selbst enthä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 ich eine Einschränkung zugeben: ich habe es nicht geschafft, den onclick-Event für die Links auf die Locations, die ich in der Funktion processLocations() erzeuge, mittel jQuery zu setzen. Damit hatte ich mich dann aber auch nicht mehr so lange auseinander gesetzt.

Die locations.php gibt, in JSON kodiert, die Daten aus der Datenbank zurück an die Website und nimmt auch neue Locations entgegen. Das ganze wird mit den jQuery AJAX-Methoden $.get() und $.post() realisiert. Nach dem Aufruf erhält die Callback-Funktion den Inhalt der Rückgabe (hier die Locations in JSON kodiert). Da es sich um JSOn handelt, werden die Daten durch ein einfach eval() von JS der Seite bekannt gemacht.

Die Funktionalitä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. Über New kann eine neue Location angelegt werden. Dazu klickt man einfach an der gewünschten Stelle auf die Map (erst New klicken!) und gibt ihr anschließend einen Namen, bevor man sie mit Save in der Datenbank abspeichert. Es werden immer nur die letzten 10 Locations angezeigt.

Die Quelltexte des Beispiel sind auf der Demo-Seite verlinkt.

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.

(Warum die Demo-Seite nicht im Safari läuft, kann ich im Moment leider nicht beantworten. So, jetzt läuft’s auch mit Safari. Man sollte immer daran denken, ein &lt/script&gt zu setzen, sonst ignoriert Safari die Zeile einfach.)

TAGS: None

21 Responses to “jQuery & Google Maps: ein Beispiel”


  1. Mountain/\Ash
    on Nov 20th, 2006
    @ 23:37

    This still does not work in Safari. Any ideas why?


  2. Dirk Olbertz
    on Nov 20th, 2006
    @ 23:41

    Not really. But I’m using an outdated version of jQuery in that example. And I learnt, that eg. IE does not like array.forEach(). In other cases, I’m using for-in. If you need a quick example, maybe you could look at http://blogscout.de/karte


  3. klelugi
    on Apr 25th, 2007
    @ 14:49

    Many thanks for this great piece of code.

    It works fine in FF but I experience issues in IE, markers and layers won’t update and won’t be visible in both IE6 and 7 do you have any ideas how I can fix this ?

    Many thanks by advance


  4. Jermaine
    on Jul 20th, 2007
    @ 00:51

    Great work, but i have the same question as above:

    Is it compatible with all major browsers?
    I don’t have a mac so i cant test myself.

    Thanks Jay


  5. Cippus
    on Aug 9th, 2007
    @ 19:52

    Great Work !
    Add this piece of code at the beggining of googlemap.js
    and it will magically work, I tried it with IE7
    Have fun !

    //patch for IE6,IE7
    if (!Array.prototype.forEach)
    {
    Array.prototype.forEach = function(fun /*, thisp*/)
    {
    var len = this.length;
    if (typeof fun != “function”)
    throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i


  6. Cippus
    on Aug 9th, 2007
    @ 19:54


    //patch for IE6,IE7
    if (!Array.prototype.forEach)
    {
    Array.prototype.forEach = function(fun /*, thisp*/)
    {
    var len = this.length;
    if (typeof fun != "function")
    throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i


  7. Bernard
    on Okt 9th, 2007
    @ 14:12

    Sorry but my english is very bad.
    I’m french and i am very interesting to use your script into a SPIP cms plugin.
    But i don’t understand where i can find the php code source.
    In fact, i seen your source but not source of the script JSON.php in Include_once in the head of you’re phpscript.
    Where is his utility?
    Can you want to help me to integrate your contribution into a spip plugin?

    Best regards


  8. mario
    on Nov 12th, 2007
    @ 10:37

    thx for the great work!
    i was wandering if it would be possible for the next version to have some more functionality

    i was thinking of this…
    for example i want to pick three different places in the same town…
    can you make that links you create in that way take you to the exactly spot with exactly the same magnification as it was in the time of booking? (ie. can script remember different zoom in values for different links?)

    thx

    mario


  9. Feliqkok
    on Nov 25th, 2007
    @ 20:44

    art
    art


  10. MUsyikok
    on Nov 26th, 2007
    @ 09:23

    smell
    smell


  11. Roberto
    on Dez 6th, 2007
    @ 14:52

    Tolles Applikation. Einfach aber sinnvoll, nur wie ist die db_locations.php aufgebaut? Könntest Du nicht einfach alle Dateien zippen und hier zum download posten.

    THx, roberto


  12. Flowreen
    on Jun 12th, 2008
    @ 12:49

    Coole Sache mit der Map. Ich muss sagen das Teil hat ne gute Funktionalität und daher werde ich es bei mir einbauen. Das File JSON.php ist leider nirgendswo zu finden. Meine Frage ist ob ihr ein Pfad oder ein Link dazu setzen könntet um dass ganze zu verfolständigen.

    Danke soweit,

    Flowreen


  13. JOKERz
    on Jun 19th, 2008
    @ 09:28

    what is the content of db_locations.php??


  14. neryo
    on Jun 27th, 2008
    @ 17:16

    hi! i have a problem with rendering map on internet explorer.. please, can you give me a solution? thank you


  15. neryo
    on Jun 27th, 2008
    @ 18:00

    ok, i’ve resolved!


  16. quel
    on Jul 23rd, 2008
    @ 10:40

    neryo or Cippus can you share your solution for IE problem ?
    i can hanle the problem with rendering map on IE :/

    btw. great script Dirk, great work.


  17. quel
    on Jul 24th, 2008
    @ 08:55

    i have found a solution.
    1. visit http://code.google.com/p/exteditor/source/browse/trunk/src/framework/v2/rui/source/js-additions.js?r=7
    2. copy all code from line 109 to the end
    3. past do googlemaps.js at beggining

    greetz ;)


  18. Eric Herberholz
    on Nov 13th, 2008
    @ 16:09

    I saw a tweet from linksgoogle (i.e. http://twitter.com/linksgoogle/status/1003865628). I tried your app. Cool! Have you thought of additing “edit”, so that users can, for example, edit their location?


  19. Alessio
    on Dez 6th, 2008
    @ 00:20

    Hi, sorry I if write in english, but for me is easier.

    I was searchig db_locations.php, but it is empty, is there a complete version of this script? Someting like a zip file to download and test?

    Thanks


  20. sverd
    on Dez 10th, 2008
    @ 05:53

    hi, i have tested all the solutions showed here for internet explorer, but none worked for me, do you have any new???
    please helpme
    thanks in advance!


  21. muna
    on Dez 22nd, 2008
    @ 09:53

    Hello Everybody…
    I have problem that the map is not properly working in Internet Explorer.
    So following to this blog i just copied the following code into ‘googlemap.js’.But it still shows error Line : 60
    Char : 5
    Error: Object doesn’t support this property or method
    Code : 0
    and does not show any marker point of the located points.
    The code that i had make copy paste is below(u can also get its link from this blog. i.e, http://code.google.com/p/exteditor/source/browse/trunk/src/framework/v2/rui/source/js-additions.js?r=7)

    THE CODE IS:
    —————————————————————————————
    if (!Array.prototype.forEach) {
    Array.prototype.forEach = function (fun) {
    var len = this.length, thisp = arguments[1], i = 0;
    if (typeof fun !== “function”) {
    throw new TypeError();
    }

    for (; i < len; i++) {
    if (i in this) {
    fun.call(thisp, this[i], i, this);
    }
    }
    };
    }

    if (!Array.prototype.filter) {
    Array.prototype.filter = function (fun) {
    var len = this.length;
    var res = [];
    var thisp = arguments[1];
    var i = 0, val;
    if (typeof fun !== “function”) {
    throw new TypeError();
    }

    for (; i < len; i++) {
    if (i in this) {
    val = this[i]; // in case fun mutates this
    if (fun.call(thisp, val, i, this)) {
    res.push(val);
    }
    }
    }

    return res;
    };
    }

    if (!Array.prototype.map) {
    Array.prototype.map = function (fun) {
    var len = this.length;
    var res = [];
    var thisp = arguments[1];
    var i = 0;
    if (typeof fun !== “function”) {
    throw new TypeError();
    }

    for (; i < len; i++) {
    if (i in this) {
    res[i] = fun.call(thisp, this[i], i, this);
    }
    }

    return res;
    };
    }

    if (!Array.prototype.some) {
    Array.prototype.some = function (fun) {
    var len = this.length, thisp = arguments[1], i = 0;
    if (typeof fun !== “function”) {
    throw new TypeError();
    }

    for (; i < len; i++) {
    if (i in this && fun.call(thisp, this[i], i, this)) {
    return true;
    }
    }

    return false;
    };
    }

    if (!Array.prototype.every) {
    Array.prototype.every = function (fun) {
    var len = this.length, thisp = arguments[1], i = 0;
    if (typeof fun !== “function”) {
    throw new TypeError();
    }

    for (; i < len; i++) {
    if (i in this && !fun.call(thisp, this[i], i, this)) {
    return false;
    }
    }

    return true;
    };
    }

    if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (elt) {
    var len = this.length,
    from = Number(arguments[1]) || 0;
    from = (from < 0) ? Math.ceil(from) : Math.floor(from);
    if (from < 0) {
    from += len;
    }

    for (; from < len; from++) {
    if (from in this && this[from] === elt) {
    return from;
    }
    }
    return -1;
    };
    }

    if (!Array.prototype.lastIndexOf) {
    Array.prototype.lastIndexOf = function (elt) {
    var len = this.length,
    from = Number(arguments[1]);
    if (isNaN(from)) {
    from = len - 1;
    } else {
    from = (from < 0) ? Math.ceil(from) : Math.floor(from);
    if (from = len) {
    from = len - 1;
    }
    }

    for (; from > -1; from–) {
    if (from in this && this[from] === elt) {
    return from;
    }
    }
    return -1;
    };
    }
    —————————————————————————————

Leave a Reply

© 2009 The Blog that never sleeps. All Rights Reserved.

This blog is powered by Wordpress and Magatheme by Bryan Helmig.