Display google maps in iframe dynamically

Question

I would like to dynamically create a "google maps" link in javascript and than set it as src for my iframe, but I don't know if it is not possible with google maps, because this doesn't work:

    document.getElementById('map_canvas').src='http://maps.google.com/maps/ms?ie=UTF8&msa=0&msid=209246852521822593612.0004feda304ac527ea40a&output=embed';

although, for example this works:

    document.getElementById('map_canvas').src='http://www.cnn.com';

This is my iframe:

<iframe id="map_canvas" name="map_canvas" width="100%" height="600px"
    frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
    src="">
</iframe>

Could you explain me, how is it possible to dynamically generate and display a google maps link in iframe ?

Thank you for help!

Answer 1

Use the google maps embed api to embed within an iframe. You are on the right track, you just need a slightly different URL structure for your src.

https://www.google.com/maps/embed/v1/MODE?key=API_KEY&parameters

Where:

{MODE} is one of place, directions, search, or view, as described in the Modes section of this document.

{API_KEY} is your free API key.

Parameters include optional parameters, as well as mode-specific parameters.

Source: https://developers.google.com/maps/documentation/embed/guide

Answer 2

Google want you to access their maps in set ways.

If it's a classic map you want to embed on your website, go here and follow these simple instructions to get an embed code.

Or if you require more control try the Google Maps Javascript API 3. You can sign up for it for free, and use their tutorial and sample code to get it set up.

Answer 3

Solution without iframe:

In your javascript file add the following:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?callback=initialize&v=3.exp&sensor=false&language=nl'; //add you api key later
document.body.appendChild(script);

function initialize(element_id, lat, lng, zoom) 
{
    zoom || zoom = 10;

    var mapLocation = new google.maps.LatLng(lat, lng);
    var mapOptions = 
    {
        center: mapLocation,
        zoom: zoom
    };

    var map = new google.maps.Map(document.getElementById(element_id), mapOptions);
}

On demand use:

initialize('some_div_id', 52.56, 10.3);

Answer 4

I solved it this way: I have added iframe per jQuery and set the desired src attr.

function displayMapAt(lat, lon, zoom) {
        $("#map")
                .html(
                        "<iframe id=\"map_frame\" "
                                + "width=\"100%\" height=\"600px\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" "
                                + "src=\"https://www.google.sk/maps?f=q&amp;output=embed&amp;source=s_q&amp;hl=sk&amp;geocode=&amp;q=https:%2F%2Fwww.google.sk%2Fmaps%2Fms%3Fauthuser%3D0%26vps%3D5%26hl%3Dsk%26ie%3DUTF8%26oe%3DUTF8%26msa%3D0%26output%3Dkml%26msid%3D205427380680792264646.0004fe643d107ef29299a&amp;aq=&amp;sll=48.669026,19.699024&amp;sspn=4.418559,10.821533&amp;ie=UTF8&amp;ll="
                                + lat + "," + lon
                                + "&amp;spn=0.199154,0.399727&amp;t=m&amp;z="
                                + zoom + "\"" + "></iframe>");

    }