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

Geodesic Polyline

    Today we will have a look at a very interesting polyline example - "The geodesic polyline". Now the first question that will pop is "What is geodesic?". Mathematically, geodesic means the shortest line between two points on a mathematically defined surface, as a straight line on a plain or an arc of a great circle or sphere.     The next question after reading the above definition is clearly, "Why do we need geodesic polylines?" and that would be followed up with "What is this Great Circle?". We will discuss this first, before we move on to the actual example today. The example is very very similar to the normal polyline example, with just a small change.     Having said so, I will now try to explain why we need a geodesic polyline? The shortest distance between two locations on the earth is rarely a straight line as the earth is roughly spherical in nature. So any two points on the earth, even if they are very close lie on a curve a...
5 comments
Read more

KML Layer Example

         Until now, we have covered various examples involving markers, polylines, polygons, i.e. creating overlays. We have also seen other examples to remove overlays! We will now move on to some other concepts. Today we will have a look at what KML is and how to create a KML layer!          Let us first understand what KML is and why is it necessary. KML stands for Keyhole Markup Language which is an XML schema for expressing geographic annotation and visualisation within 2D maps and 3D Earth browsers. The KML file specifies a set of features (place marks, images, polygons, 3D models, textual descriptions, etc.) for display in Google Earth, Maps and Mobile, or any other 3D Earth browser (geobrowser) implementing the KML encoding. Each place always has a latitude and a longitude. Other data can make the view more specific, such as tilt, heading, altitude, which together define a "camera view". ...
Post a Comment
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

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 th...
4 comments
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