In today's example we will see how to add 4 maps on the same web page and then play a bit around with some events in Google Maps API. Lets have a look at the code. All that you have to do to get the code working is copy the code in a text file and save it with .html extension. Open this html file in your browser and you will see the four maps in action!
Adding the four maps on a webpage should not be a challenge anymore, and all the more after the example Two Google Maps - Side by side that I shared a few weeks back! All you need to pay attention is to the events. There are two events "drag" and "zoom_changed". As the event names suggest, when you will drag or zoom the first map (upper left map), the remaining three maps will also zoom and pan accordingly! Try it out and leave a comment of what you think of it! You can also drop your queries or doubts about the same here!
The output of the above code appears as seen in the results section above! Hope you enjoy this example!
Adding the four maps on a webpage should not be a challenge anymore, and all the more after the example Two Google Maps - Side by side that I shared a few weeks back! All you need to pay attention is to the events. There are two events "drag" and "zoom_changed". As the event names suggest, when you will drag or zoom the first map (upper left map), the remaining three maps will also zoom and pan accordingly! Try it out and leave a comment of what you think of it! You can also drop your queries or doubts about the same here!
The output of the above code appears as seen in the results section above! Hope you enjoy this example!
Hi there, This is very cool. Many thanks. I'd like to ask if it's possible to have 4 different maps (different LatLng for each map) on one page. Thanks for your time. Paris
ReplyDeleteHi Paris.
DeleteOf course you can do it. Just set the center attribute to different values in the code.
Give it a try and let me know if you were able to do it. If not I will tell you how it is done.
Regards,
Shreerang.
Like us on Facebook at https://www.facebook.com/pages/Spatial-Unlimited/185149371538692
How do I set the center attributes different for each map?
ReplyDeleteThat's easy. You will need 4 different variables like latlng1, latlng2, etc. Each variable will hold the lat-lng value of the centre of the map.
DeleteNow you change the myOptions variables accordingly and you will get 4 maps centred at 4 different locations.