javascript - jQuery を使用した Google マップ API

Question

地図アイコン (カードにある住所の赤いピンがアイコンに表示されます) を使用して HTML 名刺をデザインしたいと考えています。マップ ウィンドウは非常に小さい (100 X 100 ピクセル) ですが、クリックすると住所が固定された Google マップが開きます。これを簡単に達成できるjQueryプラグインはありますか、それとも誰かが私を正しい方向に向けてくれますか?

Answer 1

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

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

小さい地図の場合は、標準のGoogle マップ 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));



});