Three weeks ago I have started to read an outstanding book for the Google API. So far I have finished it and this is the third review of code I have done, based on the book. The previous two concern Maps Synchronization and Animation of a line. Thus, this is the third one and probably the last one. This is the book:
In the current article I will show a simple piece of code, enabling you to click on a google map and be able to get information about the point you have clicked. Pretty much, it looks like this:
Here, you may find how the code works 🙂
So, let’s start exploring it – what do we need to make “the magic” working?
First we need to define some variables – map and infowindow. The infowindow variable is set to null:
|
1 2 |
var map; var infowindow = null; |
Then we create the function initMap(), where we actually do the magic. The function is called at the end of the script with the following lines:
|
1 |
google.maps.event.addDomListener(window, 'load', initMap); |
What do we do in the fuction? Mainly four things.
- We set the starting options of the map – in my case it is somewhere in Bulgaria, with a zoom of 6 and roadmap type. (line 22 to 26 from the code)
- The at line 29 we set the mapElement to get element by ID ‘mapDiv’ and mapDiv is the one in the <body> of the HTML.
- At line 32 we set the variable map – it creates a map object, getting as variables MapElement and MapOtpions.
- The last thing is the part, helping us to build the window upon the click. Lines 34 to 43 take care of this. We can easily see the condition in the statement, asking the window to close, if it is already open. Then we see the usage of the pre-built InfoWindow from the Google API.
Pretty much this is how the script works. Four points where you should be careful. Last, but not least, if you are using Google Maps API, you should make your own account in code.google.com to get your own API Key. This is needed, because there are limits for the free usage of google. The limits are quite high (something like 20 K), but still, it is better to use your own! The API key is put in the place of the code, where I write PUT_YOUR_OWN_KEY_HERE.
Here is the code:
|
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 51 52 53 |
<!DOCTYPE html> <html> <head> <!-- Include Google Maps JS API --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_OWN_KEY_HERE&sensor=false"> </script> <style type="text/css"> #mapDiv { width: 800px; height: 500px; } </style> <!-- Map creation is here --> <script type="text/javascript"> //Defining map as a global variable to access from other functions var map; var infowindow = null; function initMap() { //Enabling new cartography and themes google.maps.visualRefresh = true; //Setting starting options of map var mapOptions = { center: new google.maps.LatLng(42.9078, 23.8252), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; //Getting map DOM element var mapElement = document.getElementById('mapDiv'); //Creating a map with DOM element which is just obtained map = new google.maps.Map(mapElement, mapOptions); google.maps.event.addListener(map, 'click', function(e) { if (infowindow != null) infowindow.close(); infowindow = new google.maps.InfoWindow({ content: '<i>VitoshAcademy.com</i><br><b>Mouse Coordinates : </b><br><b>Latitude : </b>' + e.latLng.lat() + '<br><b>Longitude: </b>' + e.latLng.lng(), position: e.latLng }); infowindow.open(map); }); } google.maps.event.addDomListener(window, 'load', initMap); </script> </head> <body> <b>VitoshAcademy.com</b> <div id="mapDiv"></div> </body> </html> |
Enjoy the code and use it responsibly! 🙂