Google Maps API v3自定义样式地图和多个标记未显示

Question

您曾尝试将多个标记与谷歌地图的自定义样式相结合，而且我不尽如人意。如果有人能指出我的错误，我会很感激。由于标记中的“地图”变得自定义，我可以分开但不能一起做。我怎么能得到2个图标中的1个。也许我必须分别显示地图和昨晚开始的图标，所以我很高兴。

 var LocationData = [
   [42.,-70., "26 E Hastings St, Vancouver" ], 
[42.,-70., "71 E Hastings St, Vancouver" ] 

];
 var imageIcon ='micon.png';

 var map;
var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
   {
  stylers: [
    { hue: '#000089' },
    { visibility: 'simplified' },
    { gamma: 0.5 },
    { weight: 0.5 }
  ]
},

{
  featureType: 'water',
  stylers: [
    { color: '#890000' }
  ]
}
 ];

Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();

for (var i in LocationData)
{
    var p = LocationData[i];
    var latlng = new google.maps.LatLng(p[0], p[1]);
    bounds.extend(latlng);

    var marker = new google.maps.Marker({
        position: latlng,
//            map: map,
        title: p[2],
    icon: imageIcon,
    mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
    });


    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.title);
        infowindow.open(map, this);
    });



   map = new google.maps.Map(document.getElementById('map-canvas'), marker);
 var styledMapOptions = {
   name: 'Custom Style'
 };

 var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
 map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
 // To add the marker to the map, call setMap();
marker.setMap(map);
}

   map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

1. 您需要正确定义地图

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    });
    var styledMapOptions = {
        name: 'Custom Style'
    };
    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

1. 然后将标记添加到其中

完整代码

＆＃13;
＆＃13;
var LocationData = [
    [42., -70., "26 E Hastings St, Vancouver"],
    [42., -71., "71 E Hastings St, Vancouver"]

];
var imageIcon = 'micon.png';

var map;
var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

    var featureOpts = [{
        stylers: [{
            hue: '#000089'
        }, {
            visibility: 'simplified'
        }, {
            gamma: 0.5
        }, {
            weight: 0.5
        }]
    },

    {
        featureType: 'water',
        stylers: [{
            color: '#890000'
        }]
    }];

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    });
    var styledMapOptions = {
        name: 'Custom Style'
    };

    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    for (var i in LocationData) {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2],
            // icon: imageIcon,

        });


        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
    }
    map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);
＆＃13;
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
＆＃13;
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
    </script>
<div id="map-canvas"></div>
＆＃13;
＆＃13;
＆＃13;