javascript - Google map styled map marker not showing up -


i'm trying set add marker styled map , not showing reason. i've tried know fixed wont show.

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

anyone see i'm doing wrong? cheers.

you creating marker before map created (so map not google.maps.map object):

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

either create marker after map or set map property of marker after instantiating map.

proof of concept fiddle

code snippet:

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


Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -