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!

Comments

  1. 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
  2. Happy to know that you liked the post Omkar...

    ReplyDelete
  3. 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
  4. How Can i put this on my website http://www.couponmania.in/

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

ES6 101 - Lexical Declarations Let

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍

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...

ES6 101 - For..of

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍

50000 hits and live examples

    Hello to all the blog readers - to the regulars and the first timers. Spatial Unlimited just crossed the 50,000 all time hits milestone and so its time to celebrate and also mark the occasion with something new and interesting.       The new addition to this blog is that, you will now be able to enjoy the codes live on the blog. I am adding some life to the blog by converting all the earlier life-less codes to JsFiddle powered live examples. I have converted a few and am sharing the links here. Please share your feedback and let me know what you think of the new additions. Hope you keep enjoying the blog as much as I enjoy updating it! Cheers! Links to Live Examples: 1. Simple Google Map 2. Simple Map Marker 3. Multiple Markers 4. KML Layer

ES6 101 - Lexical Declarations - Const

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍