Google Map Store Locator showing locations and popup info window in the map
Hi folks,
This is a sub post of Google Map Store locator series. In this post, we’ll see how to integrate google map in your website with some basic functionalities, like;
- Marking locations on map.
- Showing location info when clicking the location.
Here is the sample out.
Now jump to implementation part behind this, don’t expect any rocket science work here, it simple as Ctrl+C & Ctrl+P 😛
Define the html div where you want to display the store locator map.
HTML
|
1 2 3 |
<body> <div id="map-canvas" style="height: 100%; margin: 0; padding: 0"></div> </body> |
All the reaming things are handled by JavaScript 🙂
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<script> //keep the instance of the opened info window, so the old window will be closed on click of new location. var openedWindow; //Store map location here var storeLocation = [new google.maps.LatLng(6.8868052, 79.87560511), new google.maps.LatLng(6.886473, 79.8562826)]; //store location info here var storeInfo = ['<div><b>Havelock City Store</b><br>Havelock City<br>Colombo<br>Sri Lanka<br><br><div><b>Hours</b></div> <div><span>Weekday :</span> 09:00 to 18:00</div><div><span>Staurday :</span> 09:00 to 18:30</div><br><div>We are Closed on Sunday</div></div>', '<div><b>Bambalapitiya Store</b><br>Bambalapitiya<br>Colombo<br>Sri Lanka<br><br><div><b>Hours</b></div> <div><span>Weekday :</span> 09:00 to 18:00</div><div><span>Staurday :</span> 09:00 to 18:30</div><br><div>We are Closed on Sunday</div></div>']; //initialize the map function initialize() { var mapOptions = { zoom: 14, center: storeLocation[0] }; // load the map to the div container var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //for each location, define the marker and information about the store for info window. for (var i = 0; i < storeLocation.length; i++) { //set the markers for each window. var marker = new google.maps.Marker({ position: storeLocation[i], map: map, index: i }); //add the listener for each marker click event, so the information about the store will be shown in the balloon. google.maps.event.addListener(marker, 'click', (function (marker) { // close the infowindow if anything opened already if (openedWindow) { openedWindow.close(); } //create and add the content to the info window according to the selected location. var infowindow = new google.maps.InfoWindow({ content: storeInfo[this.index] }); //show the info window. infowindow.open(map, this); openedWindow = infowindow; })); } } //finally load the map in your page :) google.maps.event.addDomListener(window, 'load', initialize); </script> |
In the above code storeLocation used to store location of the stores and storeInfo to store the information about the store.
Also have a look at following google help documents to see what kind of additional feature you can have with google map. Like Controls Overview, Google map events
See the sample code file here
Have fun with Google Store Locator and will see you folks in next post 😉
2 Responses
[…] Showing location in the map with popup info window. […]
[…] Google Map Store Locator showing locations and popup info window in the map […]