javascriptgoogle-mapsgoogle-maps-api-3

Google Maps API how to hide UI within iframe


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&center=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.


Solution

  • 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