CODEWITHSUNDEEP
htmlgoogle-mapsiframeonload
telexper
telexper

Reputation: 2441

how to display a map location from your website using google maps

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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1685+Centennial+Way+Corona+California+Riverside+County+92882&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=42.089199,86.044922&amp;ie=UTF8&amp;hq=&amp;hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&amp;t=m&amp;z=14&amp;ll=33.858119,-117.598538&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=1685+Centennial+Way+Corona+California+Riverside+County+92882&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=42.089199,86.044922&amp;ie=UTF8&amp;hq=&amp;hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&amp;t=m&amp;z=14&amp;ll=33.858119,-117.598538" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Generate all these values from my website to eliminate the need to manually get the code from google maps.

Upvotes: 2

Views: 13862

Answers (1)

cortices
cortices

Reputation: 373

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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;
q=1685+Centennial+Way+Corona+California+Riverside+County+92882&amp;
aq=&amp;sll=37.0625,-95.677068&amp;sspn=53.87374,114.082031&amp;
ie=UTF8&amp;hq=&amp;hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&amp;
t=m&amp;z=14&amp;ll=33.858119,-117.598538&amp;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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;
q=1685+Centennial+Way+Corona+California+Riverside+County+92882&amp;
ie=UTF8&amp;hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&amp;
t=m&amp;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.

Upvotes: 2

Related Questions