Google Map API mit jQuery

Question

Ich möchte eine HTML-Visitenkarte mit einem Kartensymbol entwerfen (das Symbol zeigt einen roten Stift der Adresse, die in der Karte ist). Das Kartenfenster wird sehr klein sein (100 X 100 px), aber beim Klicken öffnet sich Google Map mit der gepinnten Adresse. Gibt es ein jQuery-Plugin, das dies leicht erreichen kann, oder würde mich jemand bitte in die richtige Richtung weisen?

Answer 1

Es ist nicht notwendig, jQuery zu verwenden, um dies zu lösen.

Ich glaube, der einfachste Weg, dies zu erreichen, wäre, ein neues Fenster zu öffnen und den Benutzer zu Google Maps zu senden. Die Adresse kann als GET-Parameter übergeben werden.

Für die kleine Karte können Sie den Standard Google Maps JavaScript-API verwenden, um den Marker auf die Karte zu setzen.

Answer 2

Ich weiß nicht, ob es ein jquery-Plugin dafür gibt. Aber was Sie beschreiben, sollte nicht zu schwer zu erreichen sein. Ich würde folgendes für diese Aufgabe tun.

$('#my_pin').click(function(){ 
    1. create a div for map, set the height and width for this div. 
    var div = document.createElement('div'); 
    you may want to add some event hanlder to this div so that it can be closed 

    2. create a google map options similar to 
    var opts = { 
     center: new google.maps.LatLng(100,100), 
     zoom: 5, 
     mapTypeId: google.maps.mapTypeId.ROADMAP 
    } 
    3. create your map object base on the newly created div and options 
    var map = new google.maps.Map(div,opts) 

    4. attach the new div to your body or whatever parent element 
    $(div).appendTo($('body').get(0)); 



});