Skip to main content

Four maps on the same page - Playing with events

    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!

Labels:

Comments

  1. ParisOctober 19, 2011 at 7:39 PM

    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

    ReplyDelete
    Replies
    1. Shreerang PatwardhanMarch 10, 2012 at 12:12 AM

      Hi Paris.

      Of 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

      Delete
  2. UnknownOctober 4, 2012 at 5:56 PM

    How do I set the center attributes different for each map?

    ReplyDelete
    Replies
    1. Shreerang PatwardhanOctober 4, 2012 at 8:02 PM

      That'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.

      Now you change the myOptions variables accordingly and you will get 4 maps centred at 4 different locations.

      Delete

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Integrated GPS cameras...

          GeoSpatial Experts has introduced three new GPS Camera bundles designed specifically for geotagging and mapping digital photographs. The firm now offers its popular GPS-Photo Link 5.0 photo-mapping software with the new Ricoh G700SE, Sony A55, and Casio EX-H20G GPS cameras.           All of the GPS cameras below will provide you with geotagged photos, additionally, some can also offer the ability to capture the direction the photo was taken with a built-in compass, or the ability to collect attribute data in the field. WiFi and Bluetooth will allow you to communicate with laser range finder equipment to measure exact distance from the photographer to the item being photographed. Some GPS cameras provide a ruggedized camera to withstand harsh conditions.            In 2007, Ricoh introduced its 500SE model as the first GPS-eq...
2 comments
Read more

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...
17 comments
Read more

Fusion Table - Heat Map Layer

    In continuation with the previous example on Fusion Table, we will have a look at another Fusion Table layer example. Today's point of discussion is heat map! What is a heat map? A heat map is geographical representation of data where the values taken by a variable in two-dimensional map are represented as colors. Higher the value of the variable, that place on the map would be represented with a deeper color.     This example is very much similar to the previous one, just for one minor change! Let us have a look at the code.     I have just used a readily available Google Fusion Table for this example. Any anomalies in the data is not my responsibility! Copy the above code in an html file and open it in your browser! You will see the fusion table heat map layer in action! The only change in this code from the previous one is that, the heatmap property of the fusion table layer is made true! The output of the above code looks as s...
Post a Comment
Read more

Panoramia - Tag based search

    If you don't already know what Panoramia is, you can have a look at this link , to know more about Panoramia and a basic example. Today we will have a look at a more sophisticated example for Panoramia Layer in Google Maps API v3. In today's example we will search and display only those images on the map that have the tag that is being searched for.     The example is very simple and all you need to do is copy the following code in an html and open it in your browser. Search for whatever you want to and if there are images that have the same tag, then those images will appear on the map.     The output of the above code looks as it is seen in the result section above. Now you can enter your search parameter in the search box. I had entered "Fruits" and the output was as seen in the image below.     You can have your own search parameter. Enjoy the Panoramia ride!
Post a Comment
Read more