Google Map API taking long time when map is not available

Question

I am using google maps API to load the google map in my code. Now, I have to give the user an option to manually enter the address when google map is not available. Here, my problem is that when google map is not available browser takes around 2 minute to connect to the API

<script type="text/javascript"
    src="<%=requestScheme%>://maps.google.com/maps/api/js?sensor=false&libraries=places">
</script>

and the request is getting aborted due to time out. So, I have to wait 2 minute until to show the option for manually entering the details. Any suggestion to avoid this 2 min time delay when the map is not available. Do I have to set up a time out where I can wait for 30 sec and allow the user to manually enter the if the map is not loading with in that time frame?

Under what circumstances does the map not load? I've only seen this when Google itself isn't available or if the connection to the internet is broken. — Andy, Jun 16 '14 at 15:35
Load the map asynchronously: https://developers.google.com/maps/documentation/javascript/tutorial#asynch — duncan, Jun 16 '14 at 16:10
Even if I load the map asynchronously, I have to wait until the map is getting fully loaded or timeout to display something in the map frame. Until the API is loaded I will not know whether map is available or not. — sbala_20, Jun 16 '14 at 19:08

score 1 · Answer 1 · answered Jun 16 '14 at 15:52

1

You could check for the existence of the API:

var foundMap = typeof google === 'object' && typeof google.maps === 'object';

if (foundMap) {
  // load the map
} else {
  // add code for manually entering the address
}

answered Jun 16 '14 at 15:52

Andy

61,948
13
68
95

Actually, i am doing something similar in my code. But it takes time to load "http://maps.google.com/maps/api/js?sensor=false&libraries=places" this script. Unless the script is loaded I cant load the map or manually enter the address. – sbala_20 Jun 16 '14 at 18:26

score 0 · Answer 2 · edited May 23 '17 at 12:21

I was able to resolve my issue by placing the script inside the body tag(end of the body tag). Previously I placed the script inside head tag which took more time to load which in turn blocked other script until it got loaded. This link gave me the idea,

http://stevesouders.com/hpws/js-blocking.php

Basically it is best practice to place the script before the closing body tag. For better understanding please refer this post,

Where should I put <script> tags in HTML markup?

Google Map API taking long time when map is not available

2 Answers2