jQuery GMAP3包裝 - 點擊信息窗口

Question

我第一次在項目中使用jQuery GMAP 3包裝。 所有進展相當順利 - 但無法找到如何將infobubble添加的標記物的例子，但有被點擊標記時，它纔會出現......

我使用的addMarker功能是：

function addMarker($this, i, lat, lng){ 
    $this.gmap3({ 
    action : 'addMarker', 
    lat: lat, 
    lng: lng, 
    marker:{ 
     options:{ 
     icon:new google.maps.MarkerImage(\"../../a/img/find-a-ground/markers/marker.png\", new google.maps.Size(40, 40)) 
     } 
    } 
}); 

任何人都可以舉例說明如何添加一個infoWindow只顯示標記點擊？

謝謝你，史蒂夫

Answer 1

您應該添加事件監聽器標記：

function addMarker($this, i, lat, lng){ 
    $this.gmap3({ 
    action : 'addMarker', 
    lat: lat, 
    lng: lng, 
    marker:{ 
     options:{ 
     icon:new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40)) 
     }, 
     events: { 
     // add events here 
     click: function(marker, event, data) { infoWindowOpen($this, marker, data) }, 
     }, 
     // also you can add marker-depending-data to fill info window content 
     data: "hello! i am infowindow!" 
    } 
}); 

// global variable to store google InfoWindow object 
// (I assume that you have only one info window) 
var infoWindow = null; 

function infoWindowOpen($this, marker, data) { 
    if (infoWindow) { 
     var map = $this.gmap3('get'); // returns google Map object 
     infoWindow.open(map, marker); 
    } else { 
     // create info window above marker 
     $this.gmap3({action: 'addInfoWindow', anchor: marker}); 
     // get google InfoWindow object 
     infoWindow = $this.gmap3({action:'get', name:'infoWindow'}); 
    } 
    infoWindow.setContent(data); 
} 

Answer 2

可能這會幫助你。

var toAddress = "1071 SW 101ST,Hollywood,FL,33025"; 
var infoWinMsg = "this is a sample address"; 

function setMarkerObject(toAddress, infoWinMsg) { 
    $this.gmap3({ 
    action: 'addMarker', 
    address: toAddress, 
    marker: { 
     options: { 
     icon: new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40)), 
     draggable: false 
     }, 
     events: { 
     mouseover: function (marker, event) { 
      $(this).gmap3({ 
      action: 'addinfowindow', 
      anchor: marker, 
      options: { 
       content: infoWinMsg 
      } 
      }); 
     }, 
     mouseout: function() { 
      var infowindow = $(this).gmap3({ 
      action: 'get', 
      name: 'infowindow' 
      }); 
      if (infowindow) { 
      infowindow.close(); 
      } 
     } 
     } 
    }, 
    infowindow: { 
     open: false, 
     options: { 
     content: infoWinMsg 
     } 
    }, 
    map: { 
     center: true, 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false, 
     navigationControl: true, 
     scrollwheel: true, 
     streetViewControl: true 
    } 
    }); 
}