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
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!
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!
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!
ReplyDeleteHappy to know that the tutorial has helped you!
DeleteJust 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!
ReplyDeleteNice to know this Russ...=) Happy holidays!
Deletemany thanks. this code is very simple to understand
ReplyDeleteNice to know it helped you!
DeleteHow to restructure this page in blogger
ReplyDeletehttp://directorypostingjob.blogspot.com/p/con.html
Hi...The link that you have shared throws the following error!
Delete"Sorry, the page you are looking for in this blog does not exist."
Great postt
ReplyDeleteRespect and that i have a keen offer: How Much Home Renovation Cost split level house exterior remodel
ReplyDelete