In this example, the Maps API is loaded synchronously. We omitted the
defer attributes from the
script tag that loads the API, and we also
omitted the callback parameter.
<html> <head> <title>Synchronous Loading</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=weekly"></script> </body> </html>
When the API is loaded synchronously, subsequent
script tags will not execute
until the API is fully loaded. Because of this, the final
script tag can call
new google.maps.Map and assume that
google.maps.Map has been defined.
Read the documentation.
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone -b sample-map-sync https://github.com/googlemaps/js-samples.git
Other samples can be tried by switching to any branch beginning with
git checkout sample-SAMPLE_NAME