embed a map on website without iframe

15,246

There are two ways of having Google Map on Web Page. Iframe and API. In your case you can use Google Map API V3 to render Google Map since you dont want to use Iframe. The another advantage of using Google Map API instead Iframe is, it works more faster that Iframe. Read here https://webmasters.stackexchange.com/questions/51444/google-maps-iframe-vs-api-which-is-faster-if-any

You can use below code to have simple map on your we page

var map;
var geocoder;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
                  mapTypeId: google.maps.MapTypeId.ROADMAP };

function initialize() {
  var myOptions = {
    center: new google.maps.LatLng(40.713955826286046, -73.992919921875 ),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}
//This will render map on load
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map_canvas"></div>

You can read more about Google Map JavaScript API V3 here https://developers.google.com/maps/documentation/javascript/

Hope this helps!

Share:
15,246
sami
Author by

sami

Updated on June 04, 2022

Comments

  • sami
    sami almost 2 years

    I have to embed a google map onto a webpage but I am not allowed to use iframes - company policy - is there another way? I checked a few things, like the javascript maps but they seem to be using iframes as well https://developers.google.com/maps/documentation/javascript/tutorial, at least if you check in firebug the maps are in an iframe as well. Is there any API or any other way to do it with no iframe? thanks