My First Google Maps API
Earth Engine User Summit 2017�12-14 June 2017
Christiaan Adams�Google Earth & Google Earth Outreach Team
What you need to get started
Let’s get started. Go to...
Note: for the future, you’ll need to get an API key for your own website!
Scroll down for “Hello, World” example & walk-through.
<!DOCTYPE html>�<html>� <head>� <title>Simple Map</title>� <meta name="viewport" content="initial-scale=1.0">� <meta charset="utf-8">� <style>� #map {� height: 100%;� }
html, body {� height: 100%;� margin: 0;� padding: 0;� }� </style>� </head>� <body>� <div id="map"></div>� <script>� var map;� function initMap() {� map = new google.maps.Map(document.getElementById('map'), {� center: {lat: -34.397, lng: 150.644},� zoom: 8� });� }� </script>� <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"� async defer></script>� </body>�</html>
Oops…
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
See the developer tools - javascript console �(F12 or Ctrl-Shift-I)
Invalid API Key!
For now, just remove that part of the script URL, to make the first line below look like the second one:
Hooray, a map!
1. We declare the application as HTML5 using the <!DOCTYPTE html> declaration.
6. We include the Maps API JavaScript code
file (js) using another <script> tag.
5. We create a JavaScript “map” object, passing it
the <div> element and a javascript object
containing a number of map properties.
3. We create a <div> element named “map” to hold the Map.
2. We set up some CSS styles to position elements on the page.
4. In a <script> tag, we create a function which initializes the map.
7. The js file loads asynchronously, and calls our initMap() function when ready.
This is where your API Key will go for production.
Starting zoom level.
Styles:
The map div is set to fill the whole page vertically.
Starting centerpoint location for the map.
Change the map styles to read:
#map {
height: 600px;
width: 800px;
}
Change the centerpoint & zoom:
center: {lat: 37.4036, lng: -122.0325},
zoom: 17
Let’s make some changes!
Add a title to your page, just above the map div:
<h1>My First Maps API Page</h1>
<div id="map"></div>
Add the mapTypeId:
mapTypeId: 'satellite'
Tip: Don’t forget the comma after each item in the list, except the last one!
Save your file and reload your page to see the changes.
Default Control Set
Try adding:
zoomControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: true
Overlay Types:
Add a marker!
Put the code inside the initMap function, and after the map declaration & options.
var myLatLng = {lat: 37.4044, lng: -122.0314};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
Try adding a different icon!
var image = 'http://maps.google.com/mapfiles/kml/shapes/sunny.png';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'Hello World!'
});
Size and complexity restrictions for KML rendering:
In Earth Engine, we can�export vectors to KML�in a GCS Bucket
Add a KML layer:
var LanduseSamples = new google.maps.KmlLayer({
url:'https://storage.googleapis.com/ee-demos/eeus/LanduseFeaturesee_export.kml',
map: map
});
Export raster�tiles to GCS�(eg: NDVI)
Tiles in GCS
Add a Raster Tile layer (overlayMapType method):
var minZoom = 0;
var maxZoom = 14;
var tilePrefix = 'https:\/\/storage.googleapis.com\/ee-demos\/eeus\/tiles\/NDVI2012\/';
var tileSuffix = '';
var overlayMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
if (zoom < minZoom || zoom > maxZoom) {
return null;
}
var numTiles = 1 << zoom;
var x = ((coord.x % numTiles) + numTiles) % numTiles;
return [tilePrefix, zoom, '/', x, '/', coord.y, tileSuffix].join('');
},
tileSize: new google.maps.Size(256, 256),
});
map.overlayMapTypes.push(overlayMapType);
Thank you