Google Maps JavaScript API v3 - Asynchronous Loading
<!DOCTYPE html> <html> <head> <title>Asynchronous Loading</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { width: 640px; height: 300px; margin: 0px; padding: 0px; } #map-canvas { background-image: url("https://maps.googleapis.com/maps/api/staticmap?center=46.8,8&zoom=7&size=808x300&maptype=default&style=feature:all|element:labels|visibility:on&markers=icon:http://maps.google.com/mapfiles/ms/icons/red-dot.png%7Ccolor:red%7C"); } </style> <script> function initialize() { var mapOptions = { zoom: 7, center: new google.maps.LatLng(46.8, 8) }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; </script> </head> <body> <h1>Asynchronous Loading</h1> <div id="map-canvas"></div> </body> </html>
<html>
<head> <title>Asynchronous Loading</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html1, body1, #map-canvas { width: 640px; height: 300px; margin: auto; padding: 0px; } #map-canvas { background-image: url("https://maps.googleapis.com/maps/api/staticmap?center=46.8,8&zoom=7&size=808x300&maptype=default&style=feature:all|element:labels|visibility:on&markers=icon:http://maps.google.com/mapfiles/ms/icons/red-dot.png%7Ccolor:red%7C"); }
</style> <script>
function initialize() {
var mapOptions = { zoom: 7, center: new google.maps.LatLng(46.8, 8) };
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadScript() {
var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script);
}
window.onload = loadScript;
</script> </head> <body> <h1>Asynchronous Loading</h1> <div id="map-canvas"></div> </body>
</html>
Source https://developers.google.com/maps/documentation/javascript/examples/map-simple-async