jQuery & Google Maps: ein Beispiel

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.)

21 Gedanken zu „jQuery & Google Maps: ein Beispiel

  1. 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

  2. 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


  3. //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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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.

  9. 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

  10. 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;
    };
    }
    —————————————————————————————

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert