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.
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
Post a Comment