Googleマップのスタイル付きマップマーカーが表示されない

Question

私は、スタイル付きマップにマーカーを追加しようとしていますが、それは何らかの理由で表示されません。私はそれを固定するために知っているすべてを試しましたが、それは表示されません。

 (function() { 
var map, mapOptions, styledMap, styles, marker, myLatLng; 
styles = [ 
    { 
     stylers: [ 
      { hue: '#00ffe6' }, 
      { saturation: -20 } 
     ] 
    }, 
    { 
     featureType: 'road', 
     elementType: 'geometry', 
     stylers: [ 
      { lightness: 100 }, 
      { visibility: 'simplified' } 
     ] 
    }, 
    { 
     featureType: 'road', 
     elementType: 'labels', 
     stylers: [{ visibility: 'on' }] 
    } 
]; 
myLatlng = new google.maps.LatLng(-33.882895, 151.204266); 
styledMap = new google.maps.StyledMapType(styles, { name: 'Styled Map' }); 
marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map 

    }); 
mapOptions = { 
    zoom: 15, 
    center: myLatlng, 
    mapTypeControlOptions: { 
     mapTypeIds: [ 
      google.maps.MapTypeId.ROADMAP, 
      'map_style' 
     ] 
    } 
}; 



map = new google.maps.Map(document.getElementById('map'), mapOptions); 
map.mapTypes.set('map_style', styledMap); 
map.setMapTypeId('map_style'); 
}.call(this)); 

誰かが間違っているのを見てください。 乾杯。

var map, mapOptions, styledMap, styles, marker, myLatLng; 
marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map 
}); 
mapOptions = { 
    zoom: 15, 
    center: myLatlng, 
    mapTypeControlOptions: { 
     mapTypeIds: [ 
      google.maps.MapTypeId.ROADMAP, 
      'map_style' 
     ] 
    } 
}; 
map = new google.maps.Map(document.getElementById('map'), mapOptions); 

いずれかがマップ後のマーカーを作成したり、インスタンス化した後、マーカーのマッププロパティを設定：マップが作成される前に、マーカーを作成している

Answer 1

は（そうmapはgoogle.maps.Map対象ではありません）地図。

proof of concept fiddle

コードスニペット：

(function() { 
 
    var map, mapOptions, styledMap, styles, marker, myLatLng; 
 
    styles = [{ 
 
    stylers: [{ 
 
     hue: '#00ffe6' 
 
    }, { 
 
     saturation: -20 
 
    }] 
 
    }, { 
 
    featureType: 'road', 
 
    elementType: 'geometry', 
 
    stylers: [{ 
 
     lightness: 100 
 
    }, { 
 
     visibility: 'simplified' 
 
    }] 
 
    }, { 
 
    featureType: 'road', 
 
    elementType: 'labels', 
 
    stylers: [{ 
 
     visibility: 'on' 
 
    }] 
 
    }]; 
 
    myLatlng = new google.maps.LatLng(-33.882895, 151.204266); 
 
    styledMap = new google.maps.StyledMapType(styles, { 
 
    name: 'Styled Map' 
 
    }); 
 
    mapOptions = { 
 
    zoom: 15, 
 
    center: myLatlng, 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [ 
 
     google.maps.MapTypeId.ROADMAP, 
 
     'map_style' 
 
     ] 
 
    } 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    map: map 
 
    }); 
 
    map.mapTypes.set('map_style', styledMap); 
 
    map.setMapTypeId('map_style'); 
 
}.call(this));

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

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