스타일 마커 아이콘 및 정보창

Question

정보창이있는 일부 점이있는 이미지입니다. 커서가 해당 지점으로 이동하면 정보 창이 표시됩니다.

<div id="map"></div> 
</div> 
<script type="text/javascript"> 
    function myMap() { 
     var locations = [ 
    ['some info', 30.118802, 31.410364], 
    ['some info', 33.616455, 73.096199], 
    ['some info', 33.598394, 73.044135], 
    ['some info', 21.673434, 39.160065], 
    ['some info', 34.011382, 71.523476], ]; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 5, 
      center: new google.maps.LatLng(31.571394, 74.310374), 
      mapTypeId: google.maps.MapTypeId.SATELLITE 
     }); 
     var infowindow = new google.maps.InfoWindow(); 
     var marker, i; 
     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map: map 
      }); 
      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 
     } 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> 

이 간단한 정보 창 코드로 간단한 마커

. info.window에 대한 마커 아이콘과 스타일이 더 필요하며 이미지에있는 info.window가없는 텍스트도 필요합니다.

Answer 1

나는 마커 아이콘에서 시작 .. 한 번에 한 단계를 보시기 바랍니다

당신은 마커에 이런 식으로 새 아이콘을 할당 할 수 있습니다

var image = 'your_path/your_file.png'; 
// you can use the path below for test 
// var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 

var myMarker = new google.maps.Marker({ 
    position: {lat: -33.890, lng: 151.274}, 
    map: map, 
    icon: image 
}); 

또는 마커가있는 경우 이미를 사용할 수 있습니다

marker.setIcon(image);