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!
Related
I embed a Google Maps view on my website, but the point is always centered. However, I want to move the point a bit to the left.
I already tried adding &ll to the end of the url, but this doesn't seem to work.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.3898312892516!2d-122.39498068385242!3d37.78090297975824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580787b995e7f%3A0x573dcb3f41440563!2sDropbox!5e0!3m2!1snl!2sbe!4v1565976484287!5m2!1snl!2sbe" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
So the cursor with 'Dropbox' is centralized, but I would need it to be on the left side of the map (while still having the pointer on Dropbox). How can I do this?
Got the embed iframe code from Google Maps. Searched the location, clicked 'share' in the left side panel and chose 'embed'.
It doesn't look like you can customize the output of the default Google Maps "share" output. I tried adjusting the map before getting the "Embed a Map" code, it doesn't modify it.
An option would be the Embed API, that has an optional center parameter that lets you adjust the center of the map.
Using the "Place mode" with the optional "center" parameter:
q=Dropbox,333+Brannan+St,+San+Francisco,+CA+94107¢er=37.7810556,-122.389
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Dropbox,333+Brannan+St,+San+Francisco,+CA+94107¢er=37.7810556,-122.389" allowfullscreen>
</iframe>
gives me:
live example
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.
I have added an embedded map in a html page. code for it is as bellow
<iframe width="100%" height="300" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=+&q=anaveer+info+media&ie=UTF8&hq=anaveer+info+media&hnear=Ahmedabad,+Gujarat&ll=23.036523,72.560641&spn=0.011078,0.021136&t=m&z=19&iwloc=A&cid=8621019355742313992&output=embed" align="middle"></iframe><br />
I have one problem that this map is not getting zoom in and out on mouse scroll. can any one have solution for that
You are using the Static Maps API which if I'm not mistaken does not have the zoom functionality you seek. If you want to enable mouse zoom, you should use the Google Maps Javascript API v3
I have may be simple question, but I'm stuck up here
I have Google map iframe, but i need to pass validation and have no idea how to change the Google map code to make it work
Example:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=bh15+5rf&aq=&sll=50.779458,-1.93428&sspn=0.131771,0.316544&ie=UTF8&hq=&hnear=BH15,+United+Kingdom&t=m&z=13&ll=50.730003,-1.985543&output=embed"></iframe><br />
Some relevant answer here:
Displaying Google map in IE using <div> <object>
But no one answer.
Can any one help, to pass validation with Google maps
It validates if you remove the elements - frameborder="0" scrolling="no".
Framborder can be replaced by adding border:0 in your css stylesheet, but removing scrolling can cause issues for older versions of IE. For more info see:
http://www.maxdesign.com.au/2011/03/10/iframe-scrollbars-and-html5/
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.