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?
Because your call to the Google API is set to defer
, the google
object won't be able in your script yet.. You could try changing it to use a native event listener, something like:
window.addEventListener('load', function() {
init();
});
by which time the Google API should be loaded.. Here's a forked fiddle from yours which works for me: http://jsfiddle.net/qdroz71e/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.