jQueryを使ったGoogle map API

Question

地図のアイコンを使ってhtml名刺をデザインしたい（このアイコンには、カード内のアドレスの赤いピンが表示されます）。地図ウィンドウは非常に小さくなりますが（100 X 100 px）、クリックするとアドレスが固定されたGoogleマップが開きます。簡単にこれを達成できるjQueryプラグインがありますか、または誰かが正しい方向に私を指すでしょうか？

Answer 1

これを解決するためにjQueryを使用する必要はありません。

これを達成する最も簡単な方法は、新しいウィンドウを開き、ユーザーをGoogleマップに送信することです。アドレスは、GETパラメータとして渡すことができます。

小さなマップの場合は、標準Google Maps JavaScript-APIを使用してマーカーをマップに配置できます。

Answer 2

jqueryのプラグインがあるかどうかわかりません。しかし、あなたが描いていることは、達成するのが難しいはずがありません。私はこの作業のために次のようにします。

$('#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)); 



});