Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to open google maps using plain html

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>
like image 608
Saint Dee Avatar asked May 10 '13 16:05

Saint Dee


1 Answers

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

like image 108
Sam R. Avatar answered Nov 15 '22 21:11

Sam R.