Google harita haritalı harita işaretleyici görünmüyor

Question

Tarzlı bir haritaya işaretçi eklemeye ve bir sebep gösterilmemeye çalışıyorum. Onu düzeltmek için bildiğim herşeyi denedim ama sadece göstermeyeceğim.

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

Yanlış yaptığımı gören var mı? Şerefe.

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

ya haritası sonrasında işaretleyici oluşturmak veya başlatmasını sonra işaretleyici haritası özelliğini ayarlayın: Harita oluşturulduktan önce işaretleyici yaratıyor

Answer 1

(şimdiye map bir google.maps.Map nesne değil) harita.

proof of concept fiddle

kod parçacığı:

(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>