Skip to main content

Google Map Loading . . . . .

    The blank web page seems so boring and dull when the map is still loading. You will come across such a situation quite often where you will be having a slow internet connection! We cannot do anything about the slow internet connection, but we can surely avoid the dull blank web-page by using a simple trick. We can place a "loading" image at the center of the web page so that the page doesn't look blank! An image like this:
    The following code will show you how this can be done and here it is!


    As you all can see the code is very very simple and the output will look as seen in the result section above.
    Do let me know what you think about the examples shared here! Do leave your comments here! Till the next example, happy mapping!
Labels:

Comments

  1. Omkar S. JoshiJune 13, 2011 at 10:46 AM

    Liked it !!! very nice. Thanx :)

    ReplyDelete
  2. AnonymousJune 13, 2011 at 8:18 PM

    Hi,

    I think it would also be nice to load a low res picture of the place being Googled, or a picture of the closest location being Googled. The picture would "dissolve" once Google Map has been loaded?

    ReplyDelete
  3. Shreerang PatwardhanJune 14, 2011 at 8:28 AM

    Happy to know that you liked the post Omkar...

    ReplyDelete
  4. Shreerang PatwardhanJune 14, 2011 at 8:29 AM

    Hi Anonymous,

    What you are suggesting is a very good idea and can definitely be done! Thanx for the idea, I will soon put up an example code for the same.

    ReplyDelete
  5. AnonymousJuly 15, 2012 at 12:19 AM

    How Can i put this on my website http://www.couponmania.in/

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

Retriving co-ordinates...

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...
5 comments
Read more

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.     Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...
1 comment
Read more

Jquery Mobile - Listview with data-inset property

    In the previous post we looked at a basic example of the jQuery Mobile listview. The listview in jQuery Mobile stretches 100% of the width with sharp edges and straight corners. If you wish to have rounded corners for your lists you need to make use of the data-inset="true" property.     Lets take a look at the example below. The lists as seen in the result below have rounded corners as opposed to the straight edges in the example in the previous post, where we had not made use of the data-inset property. When we say that we did not use the data-inset property, we mean that the value of data-inset property is "false". UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1     Hope you have followed the post. Do let me know your feedback on the same and drop your commenets below.
Post a Comment
Read more

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

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