Three weeks ago I have started to read an outstanding book for the Google API. Currently, I have read about 70% of it and I have found plenty of useful code to present. Here is the book:
In the current article I will show you how to put three types of google maps next to each other and to control them by changing the first one.
The code that I present is based on the cookbook above. In the recipe from the cookbook, the maps are two and they are “listening” to each other – e.g. if you move map type 1, map type 2 moves as well. In my example, the maps are three and they are only listening to map 1 – e.g. if you want to achieve simultaneuos effect, you should work only with map 1. This is how the final result from the code looks like:
If you do not see the three maps on the same line, but somehow one below the two, you should try to zoom out your browser.
Here , you may find the code, working 🙂
So, finally the code… What does “the magic”?
1. We define three global variables with the names map1, map2 and map3.
2. We create three functions, one for each map. In the functions we set the centre and the zoom of the map:
|
1 2 3 4 5 6 7 |
function initMapOne() { //Setting starting options of map var mapOptions = { center: new google.maps.LatLng(42.08, 24.44), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; |
Then we do the core of the trick – we get the map DOM element and we create a map with the DOM element, which we have obtained. This DOM element is the Div, which we finally show at the end of the code.
At last, we make the maps follow the left map with this code:
|
1 2 3 4 5 6 7 8 9 |
google.maps.event.addListener(map1, 'center_changed', function() { map2.setCenter(map1.getCenter()); map3.setCenter(map1.getCenter()); }); google.maps.event.addListener(map1, 'zoom_changed', function() { map2.setZoom(map1.getZoom()); map3.setZoom(map1.getZoom()); }); |
This code is repeated for each map correspondingly. At the end of the JavaScript we run the functions for the maps and that is it:
|
1 2 3 4 5 |
function initMaps() { initMapOne(); initMapTwo(); initMapThree(); } |
I think it is quite comprehensive. One last thing – 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 at the place where I write PUT_YOUR_OWN_KEY. It is free and quick to obtain one.
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!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&sensor=false"> </script> <style type="text/css"> .mapClass { width: 450px; height: 450px; display: inline-block; } </style> <!-- Map creation is here --> <script type="text/javascript"> //Defining map as a global variable to access from other functions var map1, map2, map3; //Enabling new cartography and themes google.maps.visualRefresh = true; function initMapOne() { //Setting starting options of map var mapOptions = { center: new google.maps.LatLng(42.08, 24.44), 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 map1 = new google.maps.Map(mapElement, mapOptions); //Listening center_changed event of map 1 to change //center of map 2 google.maps.event.addListener(map1, 'center_changed', function() { map2.setCenter(map1.getCenter()); map3.setCenter(map1.getCenter()); }); //Listening zoom_changed event of map 1 to change //zoom level of map 2 google.maps.event.addListener(map1, 'zoom_changed', function() { map2.setZoom(map1.getZoom()); map3.setZoom(map1.getZoom()); }); } function initMapTwo() { //Setting starting options of map var mapOptions2 = { center: new google.maps.LatLng(42.08, 24.44), zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN }; //Getting map DOM element var mapElement2 = document.getElementById('mapDiv2'); //Creating a map with DOM element which is just obtained map2 = new google.maps.Map(mapElement2, mapOptions2); } function initMapThree() { //Setting starting options of map var mapOptions3 = { center: new google.maps.LatLng(42.08, 24.44), zoom: 6, mapTypeId: google.maps.MapTypeId.SATELLITE }; //Getting map DOM element var mapElement3 = document.getElementById('mapDiv3'); //Creating a map with DOM element which is just obtained map3 = new google.maps.Map(mapElement3, mapOptions3); } //Starting two maps function initMaps() { initMapOne(); initMapTwo(); initMapThree(); } google.maps.event.addDomListener(window, 'load', initMaps); </script> </head> <body> <b>Vitosh Academy </b><br/> <div id="mapDiv" class="mapClass"></div> <div id="mapDiv2" class="mapClass"></div> <div id="mapDiv3" class="mapClass"></div> </body> </html> |
That is it! Enjoy the code!