How do I display map locations on load from my database using google maps?
Let's say I have 3 addresses from my database:
1685 Centennial Way Corona California Riverside County 92882
25492 Centennial Way Corona California Riverside County 92882
1596 Centennial Way Corona California Riverside County 92882
They all have different pages, but I want them to load the location in an iframe of google maps when the user clicks the page. Is there any code that can help me to achieve that without manually embedding the iframe code from google maps website?
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1685+Centennial+Way+Corona+California+Riverside+County+92882&aq=&sll=37.0625,-95.677068&sspn=42.089199,86.044922&ie=UTF8&hq=&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&t=m&z=14&ll=33.858119,-117.598538&output=embed"></iframe><br /><small>View Larger Map</small>
Generate all these values from my website to eliminate the need to manually get the code from google maps.
In Google Maps, there is a Link button (looks like a chain) which gives you the HTML for an iframe with your searched location.
For example, for your first example, it is as follows (line breaks inserted for readability):
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&
q=1685+Centennial+Way+Corona+California+Riverside+County+92882&
aq=&sll=37.0625,-95.677068&sspn=53.87374,114.082031&
ie=UTF8&hq=&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&
t=m&z=14&ll=33.858119,-117.598538&output=embed">
</iframe>
The GPS data is unnecessary here, so you can make it:
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&
q=1685+Centennial+Way+Corona+California+Riverside+County+92882&
ie=UTF8&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&
t=m&output=embed">
</iframe>
The link version, if necessary, is the same, except without escaped &s (&):
https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1685+Centennial+Way+Corona+California+Riverside+County+92882&aq=&ie=UTF8&hq=&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882
You can then replace the address component with the relevant one (and properly URL-encode it) with your choice of scripting language.
Related
I want the users of my webpage to be able to see an embedded google map with directions from their location to my address.
The following link correctly gets a users location and get the directions to London Bridge.
www.google.co.uk/maps?saddr=my%20location&daddr=london%20bridge
If I use google to get an embed link for that page the start address becomes static. So the embedded map wouldn't get the users location it would just use mine from when I created it.
Swapping the embed source from google with the above link results in a "could not be found" error.
<iframe src="https://www.google.co.uk/maps?saddr=my+location&daddr=london+bridge" width="600" height="450" style="border: 0;" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d158597.88842955438!2d-0.5380009862678417!3d51.60320274241831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m3!3m2!1d51.704112699999996!2d-0.7091171!4m5!1s0x4876035159bb13c5%3A0xa61e28267c3563ac!2sLondon+Bridge%2C+London+SE1+9DD!3m2!1d51.5078788!2d-0.0877321!5e0!3m2!1sen!2suk!4v1485450192422" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Attempting to modify the embed code from google also results in a blank world google map.
<iframe src="https://www.google.com/maps/embed?saddr=my%20location&daddr=london%20bridge" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Trying to change the zoom level of the map returned below. I am using it as a link in excel. Have looked around and thought this should work as I change the z=1 to z=2, etc.
http://maps.google.com/maps?z=1&t=h&q=2517 MCDEARMON ST,SACHSE,TX,75408
That is with the "old" google maps, it was never documented and no longer works. If you want a URL for an embedded google map, use the Embed API, it has a documented zoom parameter.
example 2 embedded maps, just changing the zoom parameter in the URL
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=2517+MCDEARMON+ST,SACHSE,TX,75408&zoom=10&key=API_key" allowfullscreen></iframe>
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=2517+MCDEARMON+ST,SACHSE,TX,75408&zoom=1&key=API_key" allowfullscreen></iframe><script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
I used to have a part of a web page for a venue display a map:
<iframe width="934" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?q=loc:36.12829973975456,-115.16433477401732&ie=UTF8&ll=36.12829973975456,-115.16433477401732&output=embed"></iframe>
Example of the complete page is here:
http://www.nationalvip.com/venue/4a9248d6f964a520091d20e3/xs-nightclub
This used to render to a pretty decent default street view. Somehow now I get the whole globe displayed and wrapped around. Any guesses as to what can be going on? Is there an easy fix for this?
Not sure what happened to your link, but the following should work
<iframe width="934" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/place/36%C2%B007'41.9%22N+115%C2%B009'51.6%22W/#36.128279,-115.164285,39m/data=!3m1!1e3!4m2!3m1!1s0x0:0x0?hl=en-US"></iframe>
It is a satellite view, not a Google Street View, but Street View may not be available for those coordinates.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d26008.43855814021!2d-78.795673!3d35.428672!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf25f9e0e1fa54ed!2sLillington+Veterinary+Hospital!5e0!3m2!1sen!2sus!4v1393359301118" width="450" height="200" frameborder="0" style="border:0"></iframe>
I am using the above code to embed a google maps preview on a website. But, the problem is, it is zooming all the way out to the entire world map when placing on website. When I click preview embed size (custom size) on google maps when creating the map, it shows perfectly.
Screenshot included of how it is showing up on website located here: https://productforums.google.com/forum/#!category-topic/maps/issues-and-troubleshooting/maps/mac/chrome/KaQPRdnK4ZU
Am I doing something wrong? I'm new to embedding google maps.
this seems to work:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?t=m&hl=en-GB&gl=US&mapclient=embed&ie=UTF8&ll=35.432002,-78.795919&spn=0.04336,0.084543&z=14&iwloc=lyrftr:m,1091553228966483181,,&output=embed"></iframe><br /><small>View Larger Map</small>
See here: http://jsfiddle.net/5zpd9/
On the older version of Google Maps, has gives you the embed link when click the Chain Link icon:
Oh, and the newer version can be linked by pressing 'Share and Embed map':
Which will show the newer version using:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d26008.454059026204!2d-78.795912!3d35.428624!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf25f9e0e1fa54ed!2sLillington+Veterinary+Hospital!5e0!3m2!1sen!2sus!4v1393365205127" width="600" height="450" frameborder="0" style="border:0"></iframe>
http://jsfiddle.net/5zpd9/1/
I have a table of short google urls for different places like,
ID|URL
------
1|http://goo.gl/maps/7nps
2|http://goo.gl/maps/wZlPp
depends on param in URL I need to show embedded map of that place in browser.
So, to embed second map I use iframe html script that google gives me:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&t=h&ll=40.408791,-3.692586&spn=0.002859,0.00456&z=17&output=embed"></iframe><br /><small>View Larger Map</small>
and it works, but it uses long url: http://maps.google.com/?ie=UTF8&t=h&ll=40.408791,-3.692586&spn=0.002859,0.00456&z=17&output=embed
When I try to replace it with shorter link, it doesn't work:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://goo.gl/maps/wZlPp"></iframe><br />
How is it possible to use short link there?
When you take a look at the developer console, you get something like this:
Load denied by X-Frame-Options: https://maps.google.com/?ie=UTF8&ll=48.858151,2.293611&spn=0.00648,0.021973&t=h&z=16 does not permit cross-origin framing.
So the problem is the same origin policy. It is not possible to use a short link in this case.