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

Two maps on the same page - Side-by-side

    How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.     Let's see the code. Here it is!     The output of the above code will be as seen in the result section above.     As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...
10 comments
Read more

Jquery Mobile - Basic Listview

    Continuing with the Jquery Mobile Examples, today we will take a look at the listviews in Jquery Mobile. Listviews are popularly used in websites and web-applications that are built on the Jquery Mobile platform and hence we will look at the various list patterns available with Jquery Mobile. Lists are used for a various purposes like data display, navigation, result lists and data entry. We will start with the most basic listview example and look through several examples over a number of posts.     A listview is simply an unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly listview with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an Ajax request for the URL in the link, create the new pag...
Post a Comment
Read more

Material UI, Google Polymer & Web Components

    Google introduced Material UI during the Google I/O a few days back. Since then the web is all abuzz with articles about material UI and what Polymer is and how these 2 fit together. In this article today, I will try and helps us all to get a better understanding of these new concepts.     So, let's start with Material UI first. Google has for long been trying to bridge the gap between the Web and the Android worlds with a unified user interface and Google's Material UI is a big step towards this. The new design philosophy is about dynamically adjusting the elements according to screen size, add more white space between elements, provide a lot of user feedback using animations, make use of bold UI colors and be flat and 3D about the design at the same time. Now that sounds really cool, isn't it? Well, actually it is and you will actually appreciate and enjoy it all the more when you watch the following video from this year's Google I/O.   ...
Post a Comment
Read more

The Bicycling Layer...

    Recreational cyclists and bike commuters alike can plot cycle-friendly routes, find trails, and avoid snarling traffic with Google Map's Bicycle layer. Map's bike-friendly, green-toned map layer is very eye-pleasing. The Google Maps API allows you to add bicycle information to your maps using the BicyclingLayer object.     The BicyclingLayer renders a layer of bike paths, suggested bike routes and other overlays specific to bicycling usage on top of the given map. Additionally, the layer alters the style of the base map itself to emphasize streets supporting bicycle routes and de-emphasize streets inappropriate for bicycles.     Let us have a look at the following example. The code has a map which is centered at Pune, India. There are very few cycle tracks in Pune and so you will see just a few dark green lines on the map. But if you would change the latitude-longitude values in the code and center the map at USA, then you will see a...
Post a Comment
Read more

Google Map's Real-Time Traffic Layer...

    You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support.     Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE...     The output of the above code looks as seen in the r...
4 comments
Read more