Created
November 14, 2019 22:59
-
-
Save peabnuts123/0fd68f3a9f237015d8516b324c74dd0c to your computer and use it in GitHub Desktop.
Google maps example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> | |
| <h1>Hello</h1> | |
| <div id="map"></div> | |
| <script src="./script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // API Key - could be sourced from anywhere | |
| var API_KEY = 'YOUR_API_KEY_GOES_HERE'; | |
| // Create script tag | |
| var script = document.createElement('script'); | |
| // The API key needs to be part of the source | |
| script.src = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY + "&callback=initMap" | |
| // Add the script tag to the page (this makes the browser download the script) | |
| document.body.appendChild(script); | |
| // Marker objects | |
| var places = [ | |
| { | |
| lat: -41.274005, | |
| lng: 174.774609, | |
| }, | |
| { | |
| lat: -41.2876171, | |
| lng: 174.7811156, | |
| } | |
| ]; | |
| // This function is called once Google Maps has finished loading | |
| function initMap() { | |
| // Create map centered at wellington | |
| var wellington = { lat: -41.2867, lng: 174.7730 }; | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| center: wellington, | |
| zoom: 12, | |
| }); | |
| // Add 1 marker per object in the 'places' array | |
| for (var i = 0; i < places.length; i++) { | |
| var marker = new google.maps.Marker({position: places[i], map: map}); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment