Google 带有多个 svg 图标和信息窗口的地图

Question

我有一个功能正常的 GoogleMap，可以很好地使用 SVG 图标作为标记。我现在坚持的是如何将信息windows分配给每个位置。

我一直在浏览有关添加信息的多个指南 windows，我可以使用全新的新地图和标准标记轻松地做到这一点，但是每当我尝试将其合并到带有 SVG 图标的工作地图中时，它打破了一个或另一个。

只是希望有人能给我一些建议，告诉我从哪里开始获取我的每个标记的个人信息windows。

我的工作 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

为标记添加点击监听器。
单击标记时打开信息窗口。

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>

Google 带有多个 svg 图标和信息窗口的地图

Google Map with multiple svg icons and infowindows

google-maps

svg

infowindow