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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With