I am attempting to embed a google map into a page of a website using google maps' iframe capabilities (so that I can avoid having to add things within the head and inside the body tag of the page)
When I create the iframe code, everything is fine except for the fact that the info window associated with the pin is opening by default when the page loads.
I'm wondering if anyone has successfully overridden this behavior. I've found a few posts describing how to do it for a geocoded address but not for a specific place of business (it seems the attributes are different)
Code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=Madison+Square+Garden+New+York+NY&hl=en&cd=1&ei=PoNXS-hcmuLJBNfexZUI&sig2=dFymmpNhsjY6dEvjphBbPQ&sll=40.731053,-73.951703&sspn=0.127506,0.130247&ie=UTF8&view=map&cid=5487804314630162138&ved=0CCUQpQY&hq=Madison+Square+Garden+New+York+NY&hnear=&ll=40.750354,-73.992491&spn=0.006295,0.006295&iwloc=A&output=embed"></iframe>
(This is the suggestion I found on 'net that does not seem to work for a specific place of business: http://www.sugarwebdev.co.uk/blog/hide-or-remove-the-info-window-on-an-embedded-google-map/)
I tried the solution posted in your question, using the iframe code you provided and it worked fine. I added:
&iwloc=near
right after the 'output=embed' at the end.
Related
As many on stackoverflow have noticed, using trying to display google in an iframe like this doesn't work:
<iframe src="https://www.google.com/search?q=query"></iframe>
However, this does:
<iframe src="https://www.google.com/search?q=query&igu=1"></iframe>
Who discovered this? I cannot find the original source.
I am using the Embed API, with iframe.
Sample code:
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
By default, when you are scrolling on the iframe, you get a message telling you to hold down ctrl key to keep scrolling, while the rest of the page keeps scrolling
I want it so that when you do not need to hold down ctrl key to scroll on the Embed map. Is this possible?
Currently, Embed API doesn't support that kind of feature. I would suggest to file for a Feature Request in our Google Issue Tracker.
Issue Tracker is a tool used internally at Google to track bugs and feature requests during product development. It is available outside of Google for use by external public and partner users who need to collaborate with Google teams on specific projects.
On the other hand, you can disable it using Javascript API. Set gestureHandling to greedy if you prefer the map to soak up the scroll rather than the page.
Does anyone know if it's possible to embed a Google Map using iframe into a Github pages page built using the automatic page generator?
For example, I would like to embed something like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d100921.8397227734!2d-122.50711698562192!3d37.77111185957552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sGithub!5e0!3m2!1sen!2sus!4v1464784986282" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
When I try to embed the above, however, the iframe element appears to be stripped from the final HTML so that no map is shown.
I looked around a bit and couldn't find much information on embedding maps, or in general, using iframe elements in Github pages.
People appear to have luck embedding Youtube videos within an iframe, but the same tweak does not help with the maps.
Any suggestions?
You will not be allowed to insert iframe from the page generator.
You have to edit your page from, for example, https://github.com/username/repositoryname/blob/gh-pages/index.html, by clicking on edit button (see picture) and insert your iframe code.
I've got an embedded google mymaps. It seems the zoom parameter doesn't work at all. I cannot find any useful information on google documentation.
Mymaps seem not to follow the standard iframe maps api.
<iframe src="https://www.google.com/maps/d/embed?mid=1gatxEY51NXkSRl461HgAxmk2bwI" width="640" height="480"></iframe>
EDIT:
Following Matej's accepted answer, I found a couple of useful links:
What parameters should I use in a Google Maps URL to go to a lat-lon?
https://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters
And then modified my embed code like this, so I could add zooming (through 'z' param) and centering (through 'll' param):
<iframe src="https://www.google.com/maps/d/embed?mid=1gatxEY51NXkSRl461HgAxmk2bwI&z=5&ll=43.7695600,11.2558140" width="640" height="480"></iframe>
And by the way: I usually like to find my lat/lng position with this site:
http://mygeoposition.com/
Try add z=nn parameter to the url where nn is the zoom level.
This works for me:
<iframe src="https://www.google.com/maps/d/embed?mid=1gatxEY51NXkSRl461HgAxmk2bwI&z=10" width="640" height="480"></iframe>
Try add zoom=nn parameter to the url where nn is the zoom level.
This is how I solved the issue.
I am trying to do a simple google map embed but it does not work in internet explorer. I went to google maps clicked the link button and then copy and pasted the embed code. It is working in all the other browsers. Does anyone know how to make it work in IE? I find it hard to believe that google would just make the embed code incompatible.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2220+Haine+Drive,+Suite+45+78550&aq=&sll=37.0625,-95.677068&sspn=44.744674,107.138672&ie=UTF8&hq=&hnear=2220+Haine+Dr,+Harlingen,+Cameron,+Texas+78550&view=map&z=14&ll=26.176442,-97.667951&output=embed"></iframe><br /><small>View Larger Map</small>
this is in IE8. the map works when I switch to compatibility mode. I don't think the users of the site would even know what compatibility mode is, so I want to figure out how this can work.
This is more of a hack, but I think you can use
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
in order to tell IE8 to emulate IE7.
solution is simple: just find the ll parameter in iframe's src... ll is the center position of the map. So find another coordinate on google map which is a little bit over or below your main marker. copy the new coordinates and change ll on src ... So when you show/hide map, you see your marker is centered, or at least somewhere on the map