The best way to upload Google maps to a website

Question

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

My setup:

At the end of the .js file

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

And at the 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 to make the map display faster on the screen?

Answer 1

You do not need to include both of these scenarios:

 <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 use only Google Maps. If you use more than these Google APIs (or these JavaScript libraries ), only include http://www.google.com/jsapi . Otherwise, if you use only Google Maps, only include http://maps.google.com/maps/api/js?sensor=false . This will save one request.

You can't get maps to load faster, but one of the tricks you can do is to load a static map first using the Google Map API of static maps , so it will load faster.

Another trick is to download maps only when the user asks for it. However, not knowing what your site’s requirement is, it’s hard to say. With the google library downloader you can execute

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

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

Answer 2

can you add an eventlistener to the button and dynamically create and populate a new iframe with the map as content? Thus, the map will not be loaded until the button is pressed.

 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 will need to mark the iframe and place it to the right, this is just an idea.