CODEWITHSUNDEEP
javascriptgoogle-maps
raklos
raklos

Reputation: 28545

optimal way of loading google maps in website

I'm using Google Maps v3 and want it to load faster.

My setup:

At the end of a .js file 

google.maps.event.addDomListener(window, 'load', initialize);

And at end of the HTML page code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

How can I make the map appear on screen quicker?

Upvotes: 4

Views: 12180

Answers (2)

HChen
HChen

Reputation: 2141

You don't need to include both of these scripts:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

especially if you only using Google Maps. If you are using more than one of these Google APIs (or these JavaScript libraries), include only http://www.google.com/jsapi. Otherwise, if you are only using Google Maps, include only http://maps.google.com/maps/api/js?sensor=false. This along will save one request.

You can't really make the maps load quicker, but one of the tricks you can do is load a static map first using Google Map's Static Maps API so it will appear to load faster.

Another trick is to load the maps only when the user asks for it. However, without knowing what your site's requirement is, it's hard to tell. With the Google library loader, you can do

google.load("maps", "3", {other_params:'sensor=false', callback: function(){
  var map; // initialize your map in here
});

or if you are not using the library loader, you can do this.

Upvotes: 5

user657496
user657496

Reputation:

you can add an eventlistener to a button and dynamically create and fill a new iframe with the map as a content? This way the map will not be loaded untill the button has been clicked.

var map = YOUR GOOGLE MAPS MINIMAP SRC;
$('#button').bind('click', function() {
    if($('#iframe').size == 0) {
        $('#iframe').load(map, function() {
            $('#button').unbind('click');
        });
    }
});

Of course you'll have to style the iframe and position it right, this is just an idea.

Upvotes: 0

Related Questions