javascript - 带有 jQ​​uery 的谷歌地图 API

Question

我想设计一个带有地图图标的 html 名片（该图标将显示卡片中地址的红色图钉）。地图窗口将非常小（100 X 100 像素），但单击它会打开带有固定地址的谷歌地图。是否有一个 jQuery 插件可以轻松实现这一点，或者有人会指出我正确的方向吗？

Answer 1

没有必要使用 jQuery 来解决这个问题。

我相信实现这一目标的最简单方法是打开一个新窗口，并将用户发送到谷歌地图。地址可以作为 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));



});