Google지도 API 정보 창이 열리지 않습니다

Question

내 웹 사이트에서 Google지도를 사용하면 정상적으로 작동합니다. 그러나 자신의 마커 이미지를 사용하면 정보 창이 더 이상 나타나지 않습니다. 왜 아무 생각 없어? 나는를 수정 한

https://developers.google.com/maps/documentation/javascript/custom-markers

:

당신은 JSFiddle 예제를 포함하고 여기에 사용자 정의 마커에 대한 문서가있다 https://www.hauskataloge24.de/index.php?id=6

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 6, 
     center: {lat: 50.984768, lng: 11.029880} 
    }); 

    setMarkers(map); 
} 

var musters = <?php echo json_encode($musters); ?>; 

function setMarkers(map) { 
    var image = { 
     url: 'img/markerBlue.png' 
    }; 

    for (var i = 0; i < musters.length; i++) { 
     var muster = musters[i]; 
     var infowindow = new google.maps.InfoWindow(); /* SINGLE */ 

     var markers = new google.maps.Marker({ 
      position: {lat: muster[1], lng: muster[2]}, 
      map: map, 
      icon: image, 
      title: muster[0] 
     }); 

     placeMarker(muster); 

     function placeMarker(loc) { 
      var latLng = new google.maps.LatLng(loc[1], loc[2]); 
      var marker = new google.maps.Marker({ 
       position : latLng, 
       map  : map 
      }); 
      google.maps.event.addListener(marker, 'click', function(){ 
       infowindow.close(); // Close previously opened infowindow 
       infowindow.setContent("<div id='infowindow'>"+ loc[3] +"</div>"); 
       infowindow.open(map, marker); 
      }); 
     } 
    } 
} 

Answer 1

귀하의 도움에 감사드립니다. 내가 찾던 것이 아니었지만 해결책을 찾는데 도움이되었습니다. 고마워.

내 기능 장소 표시의 아이콘을 추가 할 잊어 버린()

지금 나는 그것을 얻고 그것을 잘 작동합니다. 감사합니다 :-)

 function placeMarker(loc) { 
      var latLng = new google.maps.LatLng(loc[1], loc[2]); 
      var marker = new google.maps.Marker({ 
       position : latLng, 
       icon: icons.icon, 
       map  : map 
      }); 
      google.maps.event.addListener(marker, 'click', function(){ 
       infowindow.close(); // Close previously opened infowindow 
       infowindow.setContent("<div id='infowindow'>"+ loc[3] +"</div>"); 
       infowindow.open(map, marker); 
      }); 
     } 

Answer 2

에서 내 자신의 마커없이 전체 프로젝트를 볼 수 있습니다 위의 문서에서 샘플을 사용하여 마커를 누를 때마다 정보 창이 나타납니다. 여기 내 바이올린을 참조하십시오 (참고 : 당신은 그것이 작동하는 코드에 API 키를 추가해야합니다 나는 보안을 위해 내 제거) : 사용자 정의 마커 아이콘

https://jsfiddle.net/tmgz0vau/

코드 샘플 :

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
var icons = { 
    parking: { 
    icon: iconBase + 'parking_lot_maps.png' 
    }, 
    library: { 
    icon: iconBase + 'library_maps.png' 
    }, 
    info: { 
    icon: iconBase + 'info-i_maps.png' 
    } 
}; 

var infowindow = new google.maps.InfoWindow({ 
     content: 'this is a test' 
}); 

function addMarker(feature) { 
    var marker = new google.maps.Marker({ 
    position: feature.position, 
    icon: icons[feature.type].icon, 
    map: map 
    }); 

    marker.addListener('click', function() { 
     infowindow.open(map, marker); 
    }); 
} 

var features = [ 
    { 
    position: new google.maps.LatLng(-33.91721, 151.22630), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91539, 151.22820), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91747, 151.22912), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91910, 151.22907), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91725, 151.23011), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91872, 151.23089), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91784, 151.23094), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91682, 151.23149), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91790, 151.23463), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91666, 151.23468), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.916988, 151.233640), 
    type: 'info' 
    }, { 
    position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), 
    type: 'parking' 
    }, { 
    position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), 
    type: 'parking' 
    }, { 
    position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), 
    type: 'parking' 
    }, { 
    position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), 
    type: 'parking' 
    }, { 
    position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), 
    type: 'parking' 
    }, { 
    position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), 
    type: 'parking' 
    }, { 
    position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), 
    type: 'parking' 
    }, { 
    position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), 
    type: 'library' 
    } 
]; 

for (var i = 0, feature; feature = features[i]; i++) { 
    addMarker(feature); 
} 

이 정보가 도움이 되었기를 바랍니다.