Google Maps API信息窗口不會打開

我在我的網站上使用Google地圖，它工作正常。但是如果我使用自己的標記圖像，那麼信息窗口不會再彈出。任何人的想法爲什麼？Google Maps API信息窗口不會打開

您可以在

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

來源

2017-03-06 Timo Braun

嘿，夥計感謝您的幫助。這不是我所期待的，但它幫助我找到解決方案。謝謝。

我忘了加在我的函數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); 
      }); 
     }

來源

2017-03-09 15:57:40

看到整個項目沒有我自己的標記沒有放在這裏自定義標記文檔包含的jsfiddle例如：

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

我已經修改了在上面的文檔中進行採樣，只要按下標記就會出現infowindow。請參閱我的小提琴這裏（注意：您需要將您的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); 
}

我希望這有助於！

來源

2017-03-08 21:37:23

Google Maps API信息窗口不會打開

回答

相關問題