created a new styled google map with https://mapbuildr.com/ - all working well. here is the full code:
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyB3bABW7kKWoZmbDMAjRsR1aFuW4m10bcg&sensor=false&extension=.js'></script> <script> google.maps.event.addDomListener(window, 'load', init); var map; function init() { var mapOptions = { center: new google.maps.LatLng(58.057506,26.494842), zoom: 17, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT, }, disableDoubleClickZoom: true, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, }, scaleControl: true, scrollwheel: true, panControl: true, streetViewControl: true, draggable : true, overviewMapControl: true, overviewMapControlOptions: { opened: false, }, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: [ { "stylers": [ { "saturation": -100 }, { "gamma": 0.8 }, { "lightness": 4 }, { "visibility": "on" } ] },{ "featureType": "landscape.natural", "stylers": [ { "visibility": "on" }, { "color": "#5dff00" }, { "gamma": 4.97 }, { "lightness": -5 }, { "saturation": 100 } ] } ], } var mapElement = document.getElementById('google-map-styled'); var map = new google.maps.Map(mapElement, mapOptions); var locations = [ ['Pühajärve Grill&Pub', 'undefined', 'undefined', 'undefined', 'undefined', 58.057104319954995, 26.494465303635366, 'https://mapbuildr.com/assets/img/markers/solid-pin-red.png'] ]; for (i = 0; i < locations.length; i++) { if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];} if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];} if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];} if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];} if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];} marker = new google.maps.Marker({ icon: markericon, position: new google.maps.LatLng(locations[i][5], locations[i][6]), map: map, title: locations[i][0], desc: description, tel: telephone, email: email, web: web }); if (web.substring(0, 7) != "http://") { link = "http://" + web; } else { link = web; } bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link); } function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) { var infoWindowVisible = (function () { var currentlyVisible = false; return function (visible) { if (visible !== undefined) { currentlyVisible = visible; } return currentlyVisible; }; }()); iw = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function() { if (infoWindowVisible()) { iw.close(); infoWindowVisible(false); } else { var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='mailto:"+email+"' >"+email+"<a><a href='"+link+"'' >"+web+"<a></div>"; iw = new google.maps.InfoWindow({content:html}); iw.open(map,marker); infoWindowVisible(true); } }); google.maps.event.addListener(iw, 'closeclick', function () { infoWindowVisible(false); }); } } </script> <style> #google-map-styled { height:700px; width:950px; } .gm-style-iw * { display: block; width: 100%; } .gm-style-iw h4, .gm-style-iw p { margin: 0; padding: 0; } .gm-style-iw a { color: #4272db; } </style> <div id='google-map-styled'></div> copied the parts of the code to http://jsfiddle.net/ -map not showing up there. :(
what i am missing, what i have made wrong? is it correct to use that code in jsfiddle at all?
