Skip to main content

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!
Labels:

Comments

  1. AnonymousNovember 26, 2012 at 12:25 PM

    Thank you so much for the tutorial and especially the code example! It answered the questions I was struggling with and made it crystal clear! Best regards to you and thanks again!

    ReplyDelete
  2. Russ DaveyNovember 29, 2012 at 10:37 AM

    Just wanted to say thanks for this - I had been messing around for hours trying to fix issues, in the end I followed this to the letter and my problems vanished. Thank you!

    ReplyDelete
  3. AnonymousJanuary 8, 2013 at 9:47 AM

    many thanks. this code is very simple to understand

    ReplyDelete
  4. AnonymousMarch 5, 2013 at 6:52 AM

    How to restructure this page in blogger

    http://directorypostingjob.blogspot.com/p/con.html

    ReplyDelete
    Replies
    1. Shreerang PatwardhanMarch 5, 2013 at 8:33 PM

      Hi...The link that you have shared throws the following error!
      "Sorry, the page you are looking for in this blog does not exist."

      Delete
  5. Miles RileyNovember 22, 2021 at 5:27 PM

    Great postt

    ReplyDelete
  6. AnonymousNovember 7, 2024 at 6:28 AM

    Respect and that i have a keen offer: How Much Home Renovation Cost split level house exterior remodel

    ReplyDelete

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

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 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

Jquery Mobile - Touch Optimized, Jquery and HTML5 based web framework

    Jquery Mobile - The next level of "Write Less, Do More" mantra of Jquery. Just recently, I started working on a project using the Jquery Mobile framework and just instantly fell in love with it! Jquery Mobile gives immense power and flexibility to developers and enables truly cross-platform and cross-browser and multi-device development. I have just loved it and have decided to share my knowledge with the readers of Spatial Unlimited .     Jquery Mobile is a touch optimized web framework for smartphones and tablets.  It's a  unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. This is one reason why I love Jquery Mobile. It is easily customizable - no head-ace of themeing; Jquery Mobile does it for you.     Instead of wri...
3 comments
Read more