I got my API key, and constructed my embed code like so:
<iframe
id="map-canvas"
width="450"
height="250"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?key=MYKEY¢er=LAT,LNG&zoom=12&maptype=roadmap" allowfullscreen>
</iframe>
So far so good. Now, I'm trying to hide the default UI of the maps. I'm given this code by Google's docs:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
What's confusing me is that this code is trying to create the map again, but mine already shows up with the <iframe>
markup above. I've tried adding map-canvas
id to my iframe but it the script doesn't affect it too.
You can simply create the map by adding empty div in your html:
<div id="map-canvas"></div>
then you can initialize it via JS:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true
};
// Create new map object (gets element by id #map-canvas)
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
There is no need to add the iframe when initializing the map via JS.
If you wish to completely disable the Google Maps UI check this out: https://developers.google.com/maps/documentation/javascript/examples/control-disableUI
jsbin - http://jsbin.com/kudixegayo/1/edit?html,css,js,output