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!

Improve this question
6
  • Why do you want to use an iframe? This is probably not what you really want, because there usually are better solutions. Commented Jul 23, 2014 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. Commented Jul 23, 2014 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!" }); Commented Jul 23, 2014 at 15:29
  • Possible duplicate stackoverflow.com/questions/15388897/… Commented Jul 23, 2014 at 15:29
  • Might be helpful: stackoverflow.com/a/7898520/602554 Commented Jul 23, 2014 at 15:32

4 Answers 4

Reset to default
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>"); }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

Comments

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

Improve this answer

1 Comment

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.
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);
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.