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

ES6 101 - Set

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

ES6 101 - Lexical Declarations Let

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

CSS Text and Font

    In this post today, we will take a look at some of the most interesting CSS text and font properties listed below. text-transform white-space word-break word-spacing word-wrap font-variant Text-transform property:     Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum .     The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =) White-space property:     The next property to explore is the white-space  proper...
Post a Comment
Read more

ES6 101 - For..of

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Reverse Geocoding

    The term geocoding generally refers to translating a human-readable address into a location on the map. The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding. You can read more about geocoding here .     The Geocoder in Google Maps API v3, supports reverse geocoding directly. While geocoding, we supply a textual address and that gets mapped as a location on the map. However, in reverse geocoding, instead of supplying the textual address, we will supply a comma- separated latitude- longitude pair and get a textual address as the result. You can have a look at the geocoding example here , before proceeding to the reverse geocoding example.     The reverse geocoder often returns more than one result. Geocoding "addresses" are not just postal addresses, but any way to geographically name a location. For example, when geocoding a point in the city of Agra, India,...
Post a Comment
Read more