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