1

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!

FilipR
  • 1,218
  • 4
  • 22
  • 39
  • Why do you want to use an iframe? This is probably not what you really want, because there usually are better solutions. – twicejr Jul 23 '14 at 15:22
  • I want to get my location using HTML 5 geolocation API and then center a map to my location, I know I could directly use Google Maps API, but I need to use iframe, because of placemarks in my map. – FilipR Jul 23 '14 at 15:29
  • It is possible to add placemarks programmatically as well. Use var marker = new google.maps.Marker({ map: map_var_from_googlemapsMap, position: mapLocation, title: "works!" }); – twicejr Jul 23 '14 at 15:29
  • Possible duplicate http://stackoverflow.com/questions/15388897/google-maps-inside-iframe-not-loading – Mirko Cianfarani Jul 23 '14 at 15:29
  • Might be helpful: http://stackoverflow.com/a/7898520/602554 – Michael Jasper Jul 23 '14 at 15:32
  • @twicejr, yes it is, but if I add a placemark to my map in Google Maps(not programmatically), after click on placemark I get an infowindow with "directions", "save to my location", "search nearby", and I don't need to code it again, that's one of the reasons why I use iframe. – FilipR Jul 23 '14 at 15:37

4 Answers4

3

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>");

    }
FilipR
  • 1,218
  • 4
  • 22
  • 39
1

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.

Niazipan
  • 995
  • 2
  • 8
  • 16
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

Kade Keith
  • 208
  • 1
  • 11
  • Thanks, but it doesn't work even if I set iframe's src to google maps embed api link, because it doesn't display my placemarks from google maps. – FilipR Jul 24 '14 at 13:06
1

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);
twicejr
  • 1,319
  • 3
  • 13
  • 21