谷歌地圖有多個SVG圖標和信息窗口

Question

我有一個正常的GoogleMap與SVG圖標作爲標記很好地工作。我現在堅持的是我如何將infowindows分配給每個位置。

我一直在通過多種導軌上添加信息窗口，我可以用一個全新的地圖做到這一點很容易，並使用標準儲備標記但每當我試圖將其納入與SVG圖標的工作地圖拖網，它打破了一個或另一個。

只是希望有人可以給我在哪裏與個人獲得信息窗口我的每個標記的開始一些建議。

我的工作SVG標記代碼：

var map, 
desktopScreen = Modernizr.mq("only screen and (min-width:1024px)"), 
zoom = desktopScreen ? 14 : 13, 
scrollable = draggable = !Modernizr.hiddenscroll || desktopScreen, 
isIE11 = !!(navigator.userAgent.match(/Trident/) && navigator.userAgent.match(/rv[ :]11/)); 

function initMap() { 
    var myLatLng = {lat: -38.1632438, lng: 145.9190148}; 
    map = new google.maps.Map(document.getElementById('map-locator'), { 
     zoom: zoom, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     scrollwheel: scrollable, 
     draggable: draggable, 
     styles: [{"stylers": [{ "saturation": -100 }]}], 
    }); 

    var locations = [ 
     { 
      title: 'Shopping - Aldi', 
      position: {lat: -38.1626302, lng: 145.9247379}, 
      icon: { 
       url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg", 
       scaledSize: new google.maps.Size(64, 64) 
      } 
     }, 
     { 
      title: 'Shopping - Woolworths', 
      position: {lat: -38.160115, lng: 145.9283567}, 
      icon: { 
       url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg", 
       scaledSize: new google.maps.Size(64, 64) 
      } 
     }, 
     { 
      title: 'Source Address', 
      position: {lat: -38.159946, lng: 145.902425}, 
      icon: { 
       url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Arrow_1.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Arrow_1.svg", 
       scaledSize: new google.maps.Size(96, 96) 
      } 
     }     
    ]; 

    locations.forEach(function(element, index){ 
     var marker = new google.maps.Marker({ 
      position: element.position, 
      map: map, 
      title: element.title, 
      icon: element.icon, 
     }); 
    }); 
} 

Answer 1

1. 添加點擊監聽器標記。
2. 打開信息窗口點擊標記時。

var infow = new google.maps.InfoWindow(); 
locations.forEach(function(element, index) { 
    var marker = new google.maps.Marker({ 
    position: element.position, 
    map: map, 
    title: element.title, 
    icon: element.icon, 
    }); 
    marker.addListener('click', function(evt) { 
    infow.setContent(element.title); 
    infow.open(map,marker); 
    }) 
}); 

proof of concept fiddle

代碼片斷：

var isIE11 = false; 
 
var zoom = 14; 
 

 
function initMap() { 
 
    var myLatLng = { 
 
    lat: -38.1632438, 
 
    lng: 145.9190148 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-locator'), { 
 
    zoom: zoom, 
 
    center: myLatLng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    styles: [{ 
 
     "stylers": [{ 
 
     "saturation": -100 
 
     }] 
 
    }], 
 
    }); 
 
    var infow = new google.maps.InfoWindow(); 
 
    locations.forEach(function(element, index) { 
 
    var marker = new google.maps.Marker({ 
 
     position: element.position, 
 
     map: map, 
 
     title: element.title, 
 
     icon: element.icon, 
 
    }); 
 
    marker.addListener('click', function(evt) { 
 
     infow.setContent(element.title); 
 
     infow.open(map, marker); 
 
    }) 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
    var locations = [{ 
 
    title: 'Shopping - Aldi', 
 
    position: { 
 
     lat: -38.1626302, 
 
     lng: 145.9247379 
 
    }, 
 
    icon: { 
 
     url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg", 
 
     scaledSize: new google.maps.Size(64, 64) 
 
    } 
 
    }, { 
 
    title: 'Shopping - Woolworths', 
 
    position: { 
 
     lat: -38.160115, 
 
     lng: 145.9283567 
 
    }, 
 
    icon: { 
 
     url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg", 
 
     scaledSize: new google.maps.Size(64, 64) 
 
    } 
 
    }, { 
 
    title: 'Source Address', 
 
    position: { 
 
     lat: -38.159946, 
 
     lng: 145.902425 
 
    }, 
 
    icon: { 
 
     url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Arrow_1.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Arrow_1.svg", 
 
     scaledSize: new google.maps.Size(96, 96) 
 
    } 
 
    }];

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-locator"></div>