8

All I want is simple yet I am unable to find a solution. Basically, I have a list of images displayed using ul li tag. When the user clicks one of the items, I want the browser to open a new tab or window and pass a certain postcode to be displayed on Google Maps site. How can I achieve this. I have read about Google Map API but I think this is too much for what I want.

here is a sample of my code:

<ul>
   <li><a href=""><img src="image1.jpg" id="SE325JP"></a></li>
   <li><a href=""><img src="image1.jpg" id="NP125JL"></a></li>
</ul>

1 Answer 1

26

You can just send a query string of Latitude and Longitude to Google Map in your href like this:

 <!-- https://maps.google.com/?q=<lat>,<lng> -->
 <a href="https://maps.google.com/?q=46.860191,3.779297">
      <img src="PATH TO YOUR IMAGE"/>
 </a>

Or send the address:

<!-- https://maps.google.com/?q=<address> -->
<a href="https://maps.google.com/?q=58250 Montaron, France">
       <img src="PATH TO YOUR IMAGE"/>
</a>

There are many parameters which you can set while you are sending your query. For instance, if you add &t=m at the end of href link the normal map will be displayed instead of satellite map. Like this:

<!-- https://maps.google.com/?q=<address> -->
<a href="https://maps.google.com/?q=58250 Montaron, France&t=m">
       <img src="PATH TO YOUR IMAGE"/>
</a>

For a complete list of parameters see Everything You Never Wanted to Know About Google Maps' Parameters or Google Maps Query String Parameters.

See jsFiddle Demo

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.