Thursday, June 9, 2011

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 the first
tag. At the end of the line there is an attribute "float: left" which helps to align the contents of the "div" to the left!

    Omit the "float: left" attribute of the div tag and your maps will appear one below the other. Now, there would be many out there who would say, "Why not use the table?"..Well yes table can also be used to place the two maps side by side.

    Check out this space for more examples where there would be multiple maps on the same page! Do comment to let me know what you think about this post! Also, put in any requests for examples! Another thing is that, now that I am approaching a century of posts (have completed 84, including this one), do you have any suggestions? Do posts your feed-backs on the overall look and feel and content of the blog!