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>
Related
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'
});
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);
}
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>
I'm having a bit of a nightmare with this Google Maps custom styling wizard.
Ok, I have my map and it loads fine, but I am trying to add my JSON file to custom style the thing and I get an error.
Uncaught InvalidValueError: not a Feature or FeatureCollection
Also the error seems to come from a file called main.js - but I have a file called main.js and it doesn't have this code in it.
Here is my code in the head of my document.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {lat: 53.668398, lng: -2.167713}
});
// Load a GeoJSON from the same server as our demo.
map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
My JSON code:
{
"type": "FeatureCollection",
"features": [
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "color": "#efefef" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#dedddd" }
]
},{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#efefef" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "on" }
]
}
]
}
Any ideas what I'm doing wrong here? This is my first go at doing maps.
You are confusing the JSON to style a map which is what you get out of the Map Styling Wizard and the GeoJSON used by the data layer
They go in different places and do different things. To style the map, put the "style" data in the MapOptions styles property.
The data layer is used for displaying geographic information on the map (markers, polygons, polylines,...), not styling the map tiles.
Working code snippet with your map styles (if you want to load them from an external file, you can, but you wouldn't use the data layer, you would just assign the styling data to a global variable and use that for the styles property):
var map;
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {
lat: 53.668398,
lng: -2.167713
},
styles: [{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#efefef"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#dedddd"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#efefef"
}]
}, {
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [{
"visibility": "on"
}]
}]
});
// Load a GeoJSON from the same server as our demo.
//map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
you need to something like this:
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {lat: 53.668398, lng: -2.167713},
styles: [
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "color": "#efefef" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#dedddd" }
]
},{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#efefef" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "on" }
]
}
]
})
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);
});