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

Question

Hi have tried to combined multiple markers with the customized styling for google maps and I am falling short. If anyone could point out my mistake I would appreciate it. I can do both separate but not together due to the "map" in marker becoming customized. I can how ever get 1 of 2 icons to show. Maybe I have to separately display the map and the icons just started last night so idk.

 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. You need to correctly define the map

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

2. Then add the markers to it

complete code

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

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

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script> <div id="map-canvas"></div>