How do I hide labels in styled map of Philipines? - javascript

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>

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

Not Able to Turn Off Hiking Trails Layer in Google Maps

I am trying to turn off Google Maps Hiking Trails is a Custom style map but it is still showing in the map.
As you can see I almost turned off all the layers but the hiking layer still there!
Can you please let me know how to remove it?
[
{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "off" }
]
}
]
demo (jsfiddle from comments)
code snippet:
var map;
$(document).ready(function() {
var latlng = new google.maps.LatLng(49.395505, -123.203317);
var myOptions = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.set('styles', [{
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "off"
}]
}]);
});
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 25px;
}
#map_canvas {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>

To remove them, use this suggested work around:
[
{
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" }
]
}
]
(from the related issue in the issue tracker: Feature request: Add Feature Type for Ski Runs)
proof of concept fiddle
code snippet:
var map;
$(document).ready(function() {
var latlng = new google.maps.LatLng(49.395505, -123.203317);
var myOptions = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.set('styles', [
{
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" }
]
}
]);
});
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 25px;
}
html,
body,
.container,
.well,
#map_canvas {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</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>

Google map not fully loading [duplicate]

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

Categories