Google map not fully loading [duplicate]

Google map not fully loading [duplicate] - javascript

This question already has an answer here:
Maps javascript api center issue
(1 answer)
Closed 8 years ago.
I've integrated Google map with my website and it is not fully loaded. See the screen below;
I've integrated it by using the code which is given below;
<script>
var geocoder, map;
// var myAddress = document.getElementById('address');
var eineAdresseZH = 'MyAddress,Location'
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': eineAdresseZH
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 16,
draggable: false,
scrollwheel: false,
center: results[0].geometry.location,
styles: [
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#8c9ee1"
},
{
"hue": "#001a76"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#001a76"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
},
{
"weight": 1.5
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#c39619"
},
{
"saturation": 40
},
{
"lightness": -20
},
{
"gamma": 5
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#c39619"
},
{
"saturation": 50
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#c39619"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
},
{
"color": "#646464"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
},
{
"saturation": -30
},
{
"lightness": 70
}
]
}
]
}
map = new google.maps.Map(document.getElementById("map-canvasZH"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
google.maps.event.addDomListener(window, 'load', codeAddress);
</script>
<div id="map-canvasZH"></div>
I've multiple google maps in the same page which is managed by different tabs. When we click on each tab the map is not fully loaded.
If anyone knows the solution, please help me to find the problem.
Thanks,

Try this:
$(yourtab).on("click", function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(yourSavedCenter);
});

Related

Adding a custom google map marker pin

I'm trying to add a custom to pin to my map. The first part of my code is existing code. I did not write it. I'm just modifying it so I can add custom marker. Here's the first part:
<?php
$map = get_field('map');
$lat = $map['lat'];
$lng = $map['lng'];
?>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: {
lat: <?php echo $lat; ?>,
lng: <?php echo $lng; ?>
},
disableDefaultUI: true,
styles: [
{
"elementType": "geometry.fill",
"stylers": [
{
"color": "#fff500"
}
]
},
{
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
}
]
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here's the second part of what I added to create the marker. This code does not seem to work with the code above. Any suggestions?
var marker = new google.maps.Marker({
position: location,
map: map,
icon: 'https://image.ibb.co/e5hmC5/bab_marker.png'
});

Google Map GroundOverlay set map bounds, zoom and center of image bounds

I am using a groundoverlay to set an image on a map but need the map to use my groundoverlay as the center of map and zoom to fit the whole ground overlay on map and center on groundoverlay. Anyone have a solution for this? Been looking for a while.
Example fiddle here
https://jsfiddle.net/abennington/qvLe3xua/18/
My js code
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
maxZoom: 17,
scrollwheel: false,
center: {lat: 29.76786111111111, lng: -95.45805833333334},
mapTypeId: 'hybrid',
zoomControl: true,
scaleControl: true,
streetViewControl: false,
mapTypeControl: false,
styles: [
{
"featureType": "all",
"elementType": "geometry.fill",
"stylers": [
{
"weight": "0.50"
}
]
},
{
"featureType": "all",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#9c9c9c"
}
]
},
{
"featureType": "all",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.government",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.school",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_complex",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
},
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#7b7b7b"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "simplified"
},
{
"gamma": "1"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
}
]
});
var imageBounds = {
north: 29.770291666666665,
south: 29.765483333333332,
east: -95.4573388888889,
west: -95.46150555555556
};
var overlayOpts = {
opacity:1.0
};
historicalOverlay = new google.maps.GroundOverlay(
'http://www.houstonian.com/resources/1/CampMap-Rotated2.png',
imageBounds,overlayOpts);
historicalOverlay.setMap(map);
}

Pass variables from php to javascript google map

I need to pass some php variables to an external js file where my google map is initialized. Of course the map itself should use those variables. For now I can't see my map correctly loaded and I get the error
TypeError: map is undefined
and I can't even pass my variables!
I'm trying to use the easiest way like
My php
<script type="text/javascript">
var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
var latitude = '<?php echo $post_latitude; ?>'; //this is the latitude
var longitude = '<?php echo $post_longitude; ?>'; //this is the long
var paddress = '<?php echo $address; ?>'; //this is the address name
</script>
Now I guess that I'm doing wrong something in my js:
var geocoder;
var map;
function initialize_map() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
scrollwheel: false,
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}],
},
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
geocoder.geocode( { 'address': paddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new MarkerWithLabel({
position: results[0].geometry.location,
map: map, //Here I get the error
icon: pointer, //Here I don't get any image
labelContent: paddress, //here I don't get any address
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 1.0},
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize_map();
codeAddress('location');
The map it's shown, I see it but without parameters. What's wrong???

A quick fix
return the map, otherwise your codeAddress function will run without waiting for the previous function ;)
function initialize_map() {
....
return map;
}
window.map = initialize_map();
codeAddress('location');
Not sure about your php stuff, if it works, one problem could be another scope.
Try to map the variables to the global window object as shown with the map.. (quick & dirty fix)

I get a javascript error: Uncaught TypeError: Cannot read property 'setCenter' of undefined on this line:
map.setCenter(results[0].geometry.location);
The main issue is the comma at the end of the definition of the mapOptions variable, that makes the following declaration of the map variable local to the initialize_map function, make the line in initialize_map initialize the global map by changing that to a semi-colon (;).
proof of concept fiddle
code snippet:
// var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
var latitude = '40.7127837'; //this is the latitude
var longitude = '-74.0059413'; //this is the long
var paddress = 'New York, NY'; //this is the address name
var geocoder;
var map;
function initialize_map() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
scrollwheel: false,
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "administrative",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"lightness": 33
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.75"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-37"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f9f9f9"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "40"
}, {
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-37"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "100"
}, {
"weight": "2"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "80"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "0"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry",
"stylers": [{
"lightness": "-4"
}, {
"saturation": "-100"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#c5dac6"
}, {
"visibility": "on"
}, {
"saturation": "-95"
}, {
"lightness": "62"
}]
}, {
"featureType": "poi.park",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "1.00"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.50"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "0.50"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#c5c6c6"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-13"
}]
}, {
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [{
"lightness": "0"
}, {
"gamma": "1.09"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#e4d7c6"
}, {
"saturation": "-100"
}, {
"lightness": "47"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-12"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#fbfaf7"
}, {
"lightness": "77"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"lightness": "-5"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-15"
}]
}, {
"featureType": "transit.station.airport",
"elementType": "geometry",
"stylers": [{
"lightness": "47"
}, {
"saturation": "-100"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#acbcc9"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"saturation": "53"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-42"
}, {
"saturation": "17"
}]
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [{
"lightness": "61"
}]
}],
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
geocoder.geocode({
'address': paddress
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new MarkerWithLabel({
position: results[0].geometry.location,
map: map, //Here I get the error
//icon: pointer, //Here I don't get any image
labelContent: paddress, //here I don't get any address
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {
opacity: 1.0
},
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize_map();
codeAddress('location');
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map"></div>

How do I hide labels in styled map of Philipines?

I have the problem with Philipines`s view at map:
Map styles:
var styles = [
{"stylers": [{ "visibility": "off" }]},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
},
{
"weight": 1
}
]
},
{
featureType: "administrative.province",
elementType: "geometry",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"visibility": "on"
},
{
"color": "#a2d39c"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"visibility": "on"
},
{
"color": "#0e76bc"
}
]
}
];
All fine,except Philipines with strange "titles" on it. I haven`t any ideas...

I see "Spratty Islands", "Paracel Islands". You need to turn off:
{
"featureType": "landscape.natural",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
});
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': "Philipines"
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.bounds);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
var styles = [{
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}, {
"weight": 1
}]
}, {
featureType: "administrative.province",
elementType: "geometry",
stylers: [{
visibility: "off"
}]
}, {
featureType: "administrative.country",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#a2d39c"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#0e76bc"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

How can I make this google map dark?

I'm using this type of code for google map location:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:280px;width:auto;">
<div id="gmap_canvas2" style="height:300px;width:auto;"></div>
<style>
#gmap_canvas2 img {
max-width:none!important;
background:none!important
}
</style>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(44.193444, 28.649466),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(44.193444, 28.649466)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constanța, România"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
And I have this theme but I don't know how to use it, or where to put it.
[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
It's from this website https://snazzymaps.com/style/1261/dark

As described in the documentation, styles is a property of the MapOptions object that is passed in to the google.maps.Map constructor.
working fiddle
code snippet:
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(44.193444, 28.649466),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#000000"
}, {
"lightness": 40
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.country",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": "-100"
}, {
"lightness": "30"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"gamma": "0.00"
}, {
"lightness": "74"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [{
"lightness": "3"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 21
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 19
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}]
};
map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(44.193444, 28.649466)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constanța, România"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
#gmap_canvas2 img {
max-width: none!important;
background: none!important
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div style="overflow:hidden;height:280px;width:auto;">
<div id="gmap_canvas2" style="height:300px;width:auto;"></div>

This is what you need to implement (along with their library files):
<script>styles.push({ id: 1261, name: 'Dark', json: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}] });</script>

We Keep Coding

JavaScript is the programming language of the Web.

Google map not fully loading [duplicate] - javascript

Try this: $(yourtab).on("click", function() { google.maps.event.trigger(map, 'resize'); map.setCenter(yourSavedCenter); });

Related

Adding a custom google map marker pin

Google Map GroundOverlay set map bounds, zoom and center of image bounds

Pass variables from php to javascript google map

How do I hide labels in styled map of Philipines?

How can I make this google map dark?

Categories

Resources