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.
Related
I saw the following Google Maps code in a website:
href="https://www.google.com/maps/dir//Borsigstra%C3%9Fe+4,+30115+Hamburg,+Niemcy/#82.528634,43.3909246,17z/data=!4m13!1m4!3m3!1s0x47a851eed437e2b7:0x31501b0af0ac91b4!2sBornigstra%C3%9Fe+4!3b1!4m7!1m0!1m5!1m1!1s0x47a851eed437e2b7:0x31501b0af0ac91b4!2m2!1d13.3909246!2d52.528634"
I wanted to replace this with my own location.
When I go to Google Maps, search my address and get the sharable html code, I get
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2533.5747769945215!2d8.672258415914873!3d50.579269285955185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bc58ec0d5dbe19%3A0x3e2e9cd7b8a6d28a!2sBleichstra%C3%9Fe+34%2C+35390+Gie%C3%9Fen!5e0!3m2!1sde!2sde!4v1529588183346" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
What is the difference between these 2 formats, and how could I get my own address in the format of the first format?
The latter can only be used as an embedded element i.e. appearing in the page like an image.
The former is a shortcut to the directions 'mode' in google maps
Is this the link you wanted? https://www.google.com/maps/dir//50.5792659,8.6744471/#50.579266,8.674447,16z?hl=en-GB
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 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>
I'm trying to embed a Google Map solely using longitude and latitude coordinates (supplied from a MySQL database). So far, I've been pretty successful, but I have one last hurdle I'm struggling with. Here's my embed code:
<iframe width="250" height="193" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?=$result_array['lat']?>,<?=$result_array['long']?>&aq=&sll=<?=$result_array['lat']?>,<?=$result_array['long']?>&sspn=0.000647,0.001246&t=m&gl=us&ie=UTF8&ll=<?=$result_array['lat']?>,<?=$result_array['long']?>&spn=0.011505,0.018239&z=15&output=embed"></iframe>
I've gotten to a point where using only one set of coordinates, I can pinpoint the right place on the map, but the place is marked with an arrow and the relevant landmark. Does anyone know of a way to get rid of the green arrow?
Here's what I'm talking about: http://jsfiddle.net/9fmwM/6/
You may use the saddr-parameter instead of the q-parameter:
<iframe style="min-height: 99%; width: 100%;"
frameborder="0" scrolling="no"
marginheight="0"
marginwidth="0"
src="https://maps.google.com/maps?f=q&saddr=37.42216,-122.083737&source=s_d&hl=en&z=15&output=embed"></iframe>
http://jsfiddle.net/doktormolle/kUsCP/
Click here to create a embed google maps without marker and select the option Just show a map of an area!
I am using the link iframe code, directly from the google maps site, but the map when rendered on the page is very different. It is too close and it lacks the custom objects I have placed on the map.
The map is saved and public.
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&output=embed"></iframe><br /><small>View
<a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&source=embed" style="color:#0000FF;
text-align:left">Fitzgraham Academy of Dance</a> in a larger map</small>
The embedded maps are shaky at best, I recommend you look into Google Maps API and program a perfect map for yourself
I suggest you look at this link. It allows you to control the content a lot better. If you have any issues look at the source code on the Samples.