infobox 및 Gmaps.js를 사용하여 Google지도에 팝업을 표시하려고하지만 마커 클릭시 창이 열리지 않습니까?

Question

infobox를 사용하여 팝업을 표시하려고하지만 Infobox가 Map 용으로 열리지 않습니다. Gmaps.js 스크립트를 사용 중이며,지도가 내용을 완벽하게로드하지만 infobox에만 문제가 있습니다. 여기 내 코드입니다 :

map = new GMaps({ 
    div: '#gmap_geocoding', 
    lat: "20.5937", 
    lng: "78.9629", 
    zoom:5 
});    
var icon = { 
    url: "/img/marker/location-pointer.png", // url 
    scaledSize: new google.maps.Size(40, 40), // scaled size 
    origin: new google.maps.Point(0,0), // origin 
    anchor: new google.maps.Point(0, 0) // anchor 
};  
var infoBox; 
var boxOptions = { 
    disableAutoPan: true, 
    alignBottom: true, 
    closeBoxURL: "", 
    maxWidth: 0, // no max 
    pixelOffset: new google.maps.Size(-140, -12), 
    infoBoxClearance: new google.maps.Size(1, 1) 
}; 
infoBox = new InfoBox(boxOptions); 
$results = $('#search-results').find('div.MapMarker'); 
$.each($results, function(key,value){ 
    var lat = $(value).data('lat'); 
    var lng = $(value).data('lng'); 
    var name = $(value).data('name'); 
    var sport = $(value).data('sport'); 
    var image = $(value).data('image'); 
    var contentString = 
     "<div class='infoWindow text-center'><h4><a href='{{ url('/activity/') }}/{{ $vendor->vendor_slug }}/{{ $vendor->activity_slug }}'>"+ name +"</a></h4><img src='"+ image +" 'class='img-responsive' style='width:220px; height:160px;'>"+    
       "<h5><strong>Sports:</strong> "+ sport + "</h5></div>";   

    var marker = map.addMarker({ 
     lat:lat, 
     lng:lng, 
     icon: icon, 
     animation: google.maps.Animation.DROP, 
     title: name, 
     infoBox:{ 
      content:contentString 
     } 
});         
}); 

당신은 인포 박스 외부 라이브러리 포함 할 필요가 (당신이 그 일을 할 수있다, 그러나 그것은 귀하의 질문에서 명확하지 않다)

Answer 1

1. .

2. InfoBox를 열기 위해 마커에 클릭 이벤트 리스너를 추가해야합니다.

var marker = map.addMarker({ 
     lat:lat, 
     lng:lng, 
     icon: icon, 
     animation: google.maps.Animation.DROP, 
     title: name, 
     click: function(evt) { 
     infoBox.setContent(contentString); 
     infoBox.open(map.map, marker); 
     }, 
     infoBox:{ // probably not required 
      content:contentString 
     } 
});  

proof of concept fiddle

코드 :

var map; 
 
map = new GMaps({ 
 
    div: '#gmap_geocoding', 
 
    lat: "20.5937", 
 
    lng: "78.9629", 
 
    zoom: 5 
 
}); 
 
var icon = { 
 
    url: "/img/marker/location-pointer.png", // url 
 
    scaledSize: new google.maps.Size(40, 40), // scaled size 
 
    origin: new google.maps.Point(0, 0), // origin 
 
    anchor: new google.maps.Point(0, 0) // anchor 
 
}; 
 
var infoBox; 
 
var boxOptions = { 
 
    disableAutoPan: true, 
 
    alignBottom: true, 
 
    closeBoxURL: "", 
 
    maxWidth: 0, // no max 
 
    pixelOffset: new google.maps.Size(-140, -12), 
 
    infoBoxClearance: new google.maps.Size(1, 1), 
 
    boxStyle: { 
 
    opacity: 0.75, 
 
    width: "280px", 
 
    backgroundColor: "white", 
 
    border: "black 1px solid" 
 
    } 
 
}; 
 
infoBox = new InfoBox(boxOptions); 
 
$results = $('#search-results').find('div.MapMarker'); 
 
$.each($results, function(key, value) { 
 
    var lat = $(value).data('lat'); 
 
    var lng = $(value).data('lng'); 
 
    var name = $(value).data('name'); 
 
    var sport = $(value).data('sport'); 
 
    var image = $(value).data('image'); 
 
    var contentString = 
 
    "<div class='infoWindow text-center'><h4><a href='{{ url('/activity/') }}/{{ $vendor->vendor_slug }}/{{ $vendor->activity_slug }}'>" + name + "</a></h4><img src='" + image + " 'class='img-responsive' style='width:220px; height:160px;'>" + 
 
    "<h5><strong>Sports:</strong> " + sport + "</h5></div>"; 
 

 
    var marker = map.addMarker({ 
 
    lat: lat, 
 
    lng: lng, 
 
    // icon: icon, 
 
    animation: google.maps.Animation.DROP, 
 
    title: name, 
 
    click: function(evt) { 
 
     infoBox.setContent(contentString); 
 
     infoBox.open(map.map, marker); 
 
    }, 
 
    infoBox: { 
 
     content: contentString 
 
    } 
 
    }); 
 
});

html, 
 
body, 
 
#gmap_geocoding { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script> 
 
<div id="gmap_geocoding"></div> 
 
<div id="search-results"> 
 
    <div class="MapMarker" data-lat="20.5937" data-lng="78.9629" data-name="name" data-sport="baseball" data-image="http://images.clipartpanda.com/batter-clipart-silhouette_of_a_batter_swinging_a_baseball_bat_0515-0902-1110-5634_SMU.jpg" /> 
 
</div>