Created
December 2, 2016 09:34
-
-
Save revox/1a663a6bb30a69e927318c05d2ababa6 to your computer and use it in GitHub Desktop.
Starting point for JavaScript version of Google marker map (My Maps). You need an API key and the ID of your MyMap.
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Simple Marker Map using Google Maps JavaScript API</title> | |
| <style> | |
| html, | |
| body, | |
| #map-canvas { | |
| height: 100%; | |
| margin: 0px; | |
| padding: 0px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- you'll need you OWN API KEY for this https://developers.google.com/maps/documentation/javascript/get-api-key --> | |
| <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" | |
| type="text/javascript"></script> | |
| <div id="map-canvas"></div> | |
| <script> | |
| function initMap() { | |
| var map = new google.maps.Map(document.getElementById('map-canvas'), { | |
| zoom: 18, | |
| center: new google.maps.LatLng(51.474273130724924, -0.038406549073783935) | |
| }) | |
| myMapsId = 'YOUR_MYMAP_ID'; // its in the URL for the map once shared | |
| var mymapsLayer = new google.maps.KmlLayer({ | |
| url: 'https://www.google.com/maps/d/kml?mid=' + myMapsId, | |
| preserveViewport: true, | |
| map:map | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment