I would like to mark city or area bounds using Embed API and add custom markers onto it. But I am unable to create and Map object on Embed API please help me for the same.
According to the official doc here, you can enter a location that you like to show on the map, then it will create a code for you to do that. Such that:
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?center=...&zoom=...&key=..."></iframe>
Related
am trying to add an iframe map at this location:
https://www.google.com/maps/place/32.2221546+35.2965266/#32.2221546,35.2965266,17z
like
<iframe src="https://www.google.com/maps/place/32.2221546+35.2965266/#32.2221546,35.2965266,17z"></iframe>
but I get an error, somebody can help me
The location code you typed is a google map format. You should use this code when you need to share directly.(for example on WhatsApp, an e-mail)
Try this instead. when you copied the location code to browser, you will see the sharing settings. There is information enough on that page.
I found out your location on this page and saw following code.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3375.3346517032583!2d35.2965266!3d32.2221546!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x24759be185862de8!2zMzLCsDEzJzE5LjgiTiAzNcKwMTcnNDcuNSJF!5e0!3m2!1str!2str!4v1643914372999!5m2!1str!2str" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
explanation
I am using the google embed code like this:
<iframe width="1170" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=hereismykey4&q=Curtain+Street,EC2A+3AR&zoom=18" allowfullscreen>
This is working but the pointer isn't quite in the right place so I tried to set the address to be 134+Curtain+Street not just Curtain+street however when I add in the 134+ I get a view of the whole wold.
How do I get the proper address with a house number in?
Well, first you need to know that the map show in Google Maps Embed API is came from the Google Maps itself. So if you place an address in your embed request, make sure that the Google Maps supported it or let say available in it.
If you try to search 134 curtain street, you will get a response "We could not find 134 curtain street"
So you should use a valid address that the Google Maps provide you a valid a result.
So use this address "134 Curtain Rd, London EC2A 3AR" in your embed code to properly view the street that you want.
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=134+Curtain+Rd,+London+EC2A+3AR&zoom=18&maptype=roadmap" allowfullscreen>
</iframe>
Here is the sample that I create.
I'm embedding google maps to my website.
This link is what my website map looks like.
https://gyazo.com/fda645cc29b78ce791d90c878648b180
This is what I want my website to look like.
https://gyazo.com/2093195fd87a6e208c7d4d4510f02e81
This is what I have tried so far:
(Note: this is all html, no javascript)
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions?key=(APIKEY)&origin=Oslo+Norway&destination=Telemark+Norway&avoid=tolls|highways"allowfullscreen>
But I want something bit different. Basically, what I want is for users to have the option to put in where they are and where they are going.I don't want to have a preset option like the API directions gives me. Any help would be appreciated!
You can't use the Embed API to do that (origin and destination are required parameters in directions mode).
However you can go to http://maps.google.com, set up the map the way you want (with no origin or destination), then click on the "hamburger" menu, click on share or embed map, then the embed map tab and get an <iframe> URL that loads a map that looks like you want.
Example
From this URL:
https://www.google.com/maps/dir///#59.8937805,10.6450363,11z
Following that process yields this iframe code:
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d128083.93009419793!2d10.645036343724943!3d59.89378054345609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m3!3e6!4m0!4m0!5e0!3m2!1sen!2sus!4v1471120225355"
width="100%"
height="450"
frameborder="0"
style="border:0" allowfullscreen></iframe>
live URL:
http://www.geocodezip.com/example_embedded_map_directions_SO_empty.html
I would like to add several highlight places using the Embed API of Google Maps in an Iframe like this:
<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBstlDO5AXkMg6xOjrkTJliYabsODR2vYA&q=Harvard+University,Parque+explora" width="100%" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
How can I add several locations to the q parameter?
Thx!
You would have to use mymap, or the Google Maps API to do it. Embed API does not support multiple markers.
For using My Map, you need to set your maps to public before you can embed it onto your site.
To generate the embed url, it is under the 3... next to the share button
If you decided to do it with the API, you might want to reference to the Markers part of the documentation.
I am trying to embed a map into my html code.
This is the map I need:
https://maps.google.es/maps?source=s_d&f=d&saddr=Av.+Andalucia&daddr=Carretera+desconocida&geocode=FcrYKwIdw5ax_w%3BFQyxLAId-qaw_w&sll=36.427964,-5.138029&sspn=0.004333,0.009452&hl=es&mra=mift&mrsp=0&sz=17&ie=UTF8&t=m&ll=36.464367,-5.173187&spn=0.110444,0.171318&z=12&output=classic
However, clicking on the embed/link button provides me with the following iFrame:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?source=s_d&f=d&saddr=Av.+Andaluc%C3%ADa&daddr=Carretera+desconocida&geocode=FcrYKwIdw5ax_w%3BFQyxLAId-qaw_w&sll=36.427964,-5.138029&sspn=0.004333,0.009452&hl=es&mra=mift&mrsp=0&sz=17&ie=UTF8&t=m&ll=36.464367,-5.173187&spn=0.110444,0.171318&output=embed"></iframe>
which pulls back the new version of Google Maps and destroys my original route.
Anyone knows a workaround for this?
Thanks
It's possible that the Geocoding of that location is messed up. Why not use the lat/long coordinates as the destination and see if that works out for you before get the Embed link?
Seems like your destination is at 36.483361, -5.200168 in that particular map.