How can I remove the info-windows but keep the actual landmark visible? I just don't want the actual info-window to appear when the landmark is clicked because I have markers around landmarks and sometimes the landmarks are accidentally clicked instead.
Those are called clickableIcons.
To turn off the InfoWindows, set the MapOption clickableIcons: false.
From the documentation
:
clickableIcons | Type: boolean
When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable.
code snippet:
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,
clickableIcons: false
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
Related
In Google Maps static API (and the other APIs as far as I can tell), at zoom level 7 the country label for USA disappears and at zoom level 8 the labels for individual states disappear.
I am interested in generating maps at zoom level 8 but retaining the country and state labels. I realise the labels are not entirely appropriate to this zoom level but I would like them to be visible if you happened to view the map at the appropriate location.
Is there any way of acheiving this with the Google Maps API?
I have tried
style=feature:administrative.country|element:labels|visibility:on&stylefeature:administrative.province|element:labels|visibility:on
but this doesn't add the labels I want at zoom level 8. My suspicion is that this simply can't be done, but maybe someone knows a workaround.
You can't use styled maps to change that. But you can add them yourself to the map at the higher zoom levels.
proof of concept fiddle
proof of concept with all 50 states, but probably need to tweak some of the locations
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(35.9, -97.092877),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
document.getElementById('zoom').innerHTML = "zoom="+map.getZoom();
google.maps.event.addListener(map, 'click', function(e) {
console.log(e.latLng.toUrlValue(6));
});
// 35.930648,-97.166119
var myOptions = {
content: "OKLAHOMA",
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "14pt",
width: "50px",
color: "grey"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(36.05, -97.4),
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log("zoom=" + map.getZoom());
document.getElementById('zoom').innerHTML = "zoom=" + map.getZoom();
if (map.getZoom() == 8) {
ibLabel.open(map);
} else {
ibLabel.close();
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 98%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="zoom"></div>
<div id="map_canvas"></div>
In Google Map API, we have the Map Type Control in the top right corner, So we can choose between Map|Satellite.
My problem is when I click on "Satellite", a checkbox appears with input "labels", and when I click on "Map", a checkbox appears with input "terrain".
I want to disable checkbox control and fix Satellite with labels checked without showing the checkbox when clicking on, and the same thing with Map Type I want to have "terrain" unchecked without showing the checkbox on clicking.
To remove those checkboxes, and set the buttons to the options you want, create a custom mapTypeIds property for the map, removing 'terrain' and 'satellite' (so the only typeIds are 'roadmap' and 'hybrid'):
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'hybrid']
}
proof of concept fiddle (modified from this example in the documentation)
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -33,
lng: 151
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'hybrid']
}
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
I created google map with multiple markers to my website with "Google My Maps" tool and my code looks like this:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1PdcME79x-maD5xuiVEi4C777aL4" width="640" height="480"></iframe>
It was really quick and simple without any code writting but what I don't like is the header bar which is showing the name and share button. Can I somehow hide this bar? Thank you.
You can get the link to the KML from that "MyMap":
http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4
And use that to populate a KmlLayer in a Google Maps Javascript API v3 map:
var kmlLayer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map:map
});
proof of concept fiddle
code snippet:
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
});
var kmlLayer = new google.maps.KmlLayer({
url: "https://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
document.getElementById('status').innerHTML = kmlLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
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>
<div id="status"></div>
There are many calls for help with the maps API where a blank white div is undesirable. In my case it's desirable.
I know how to make a map appear.
map.setCenter(new google.maps.LatLng(latitude, longitude));
I know how to make directions appear.
directionsService.route(request, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
Occasionally I just want the map element to "go white." Later I want to put a map or directions back in there.
I've tried this:
$('#map').empty();
It works, but after that I can never make a map appear again. What's the correct way?
I suppose I could make and delete map instances but this bug report says each destroyed map instance leaks 2MB memory, and Google officially discourages the practice (here and here). I'd really rather not overlay a white rectangle, or make the map display:none. Is there no better way?
(My application is a map next to an address entry form. When sufficient detail has been entered, a map automatically appears. If the field contents are deleted, the map goes blank again.)
I would just set the map div's innerHTML to "".
document.getElementById('map_canvas').innerHTML = "";
(but $("#map_canvas").empty(); works as well)
Once you do that you need to recreate and reinitialize the map object.
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
});
proof of concept fiddle
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
});
var displayMap = true;
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
if (displayMap) {
document.getElementById('map_canvas').innerHTML = "";
} else {
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
});
}
displayMap = !displayMap;
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="btn" value="toggle map" />
<div id="map_canvas"></div>
Set the map visibility to hidden.
Better yet, use a class.
CSS:
.map-hide {
visibility: hidden;
}
jQuery:
$('#map').addClass('map-hide');
$('#map').removeClass('map-hide');
JavaScript (IE10+):
document.getElementById("map").classList.add('map-hide');
document.getElementById("map").classList.remove('map-hide');
Add the class to blank the map. Remove it when rendering the map.
Adding and removing a class is better in case multiple parts of the code turn visibility on or off for different reasons.
Setting a map's visibility to hidden is better than setting its display to none, which can permanently ruin map rendering. I saw one clue to this in the docs about Map.fitBounds() breaking.
I try to get a certain set of coordinates to display. I get this done with the google maps API, but somehow the US ends up to be the center of the world. I tried
map.setCenter( latlngbounds.getCenter(), map.fitBounds( latlngbounds ) );
and
var dor24 = new google.maps.LatLng(52.519325,13.392709);
map.setCenter( dor24);
map.fitBounds( latlngbounds );
But somehow my setting the center is ignored when at zoom level 1. Is this due to inner workings of google maps or is there a way to get a world map centered on Europe and all points showing?
These are the exmples I am talking about:
http://hpsg.fu-berlin.de/~stefan/Vortraege/
http://hpsg.fu-berlin.de/~stefan/Vortraege/talk-map.html
Edit: But without fitbounds I get this:
Don't call both map.setCenter and map.fitBounds, map.fitBounds resets the map center.
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var dor24 = new google.maps.LatLng(52.519325, 13.392709);
map.setCenter(dor24);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 256px;
width: 256px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>