jQuery GMAP3ラッパー - オン情報ウィンドウ

Question

私はプロジェクトで初めてjQuery GMAP 3ラッパーを使用しています。

を：

は

私が使用しているaddMarker機能がある...しかし、マーカーにinfobubbleを追加する方法の例を見つけることはできませんが、マーカーがクリックされたときにのみ表示されてい - はすべて非常によく行きます

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)) 
     } 
    } 
}); 

誰でもマーカーをクリックしたときにのみ表示されるインフォウィジェットを追加する方法の例はありますか？

おかげで、 スティーブ

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 
    } 
    }); 
}