複数のSVGアイコンと情報ウィンドウを持つGoogle Map

Question

SVGアイコンをマーカとしてうまく機能しているGoogleマップが機能しています。私が今執着しているのは、各場所に情報ウィンドウを割り当てる方法です。

私は情報ウィンドウを追加する際に複数のガイドを辿っていますが、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>