Google Maps APIインフォメーションウィンドウが開かない

Question

私は自分のウェブサイトでGoogle Mapsを使用しています。しかし、私が独自のマーカー画像を使用すると、インフォメーションウィンドウはもう表示されません。誰かアイデアなぜ？私が変更した

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

：

あなたはJSFiddle例が含まれ、ここでカスタムマーカーのドキュメントがあり​​

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

ご協力いただきありがとうございます。それは私が探していたものではありませんでしたが、解決策を見つけるのを助けました。どうも。

私は私の機能placeMarker（にアイコンを追加するために忘れてしまった

）

今私はそれを持って、それが正常に動作します。ありがとうございます:-)

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

こちらがお役に立てば幸いです。