1 of 32

My First Google Maps API

Earth Engine User Summit 2017�12-14 June 2017

Christiaan Adams�Google Earth & Google Earth Outreach Team

2 of 32

What you need to get started

Text editor

PC: Notepad++: http://notepad-plus-plus.org
Mac: Text Mate: download from CNET

Browser (all are fine, but Chrome and Firefox have great debugging features)

Time to practice!

Patience : there will be a lot of trial-and-error.

" Friends " who program - bake them cookies!

3 of 32

Let’s get started. Go to...

developers.google.com/maps/�documentation/javascript

4 of 32

Note: for the future, you’ll need to get an API key for your own website!

Scroll down for “Hello, World” example & walk-through.

5 of 32

6 of 32

<!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>

7 of 32

Copy the sample code (HTML and Javascript) from the website.�
Paste it into a text editor (e.g. Notepad++ or TextMate).�
Save to a folder, as firstapi.html or index.html �
Go to that folder, and open the HTML page you just created!

8 of 32

Oops…

asyncdefer ></script>

asyncdefer ></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:

9 of 32

Hooray, a map!

10 of 32

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.

11 of 32

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.

12 of 32

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>

13 of 32

14 of 32

15 of 32

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.

16 of 32

17 of 32

18 of 32

Default Control Set

Default Control Set: automatically adds controls to the map.
It sizes them based on the map size.

If you want to remove controls, you have to specifically remove them in the code.
Some controls only appear if you specifically add them in the code.
Some controls have options to specify the size or type.

19 of 32

Try adding:

zoomControl: true,

mapTypeControl: true,

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

},

scaleControl: true

20 of 32

Overlay Types:

Markers (points)
Polylines
Polygons (including circles & rectangles)
Info windows
Ground overlay & custom overlay (lay image on the map)
Overlay map types & Custom map types (tiles)

21 of 32

22 of 32

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!'

});

23 of 32

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!'

});

24 of 32

25 of 32

Size and complexity restrictions for KML rendering:

Maximum fetched file size: 3 MB
Maximum uncompressed KML file size (extracted from KMZ): 10 MB
Maximum number of total document-wide features: 1,000
Maximum number of network Links: 10
Number of KML layers depends on URL length, usually about 10-20
Supported KML elements - not all KML elements are supported in Maps

26 of 32

In Earth Engine, we can�export vectors to KML�in a GCS Bucket

27 of 32

Add a KML layer:

var LanduseSamples = new google.maps.KmlLayer({

url:'https://storage.googleapis.com/ee-demos/eeus/LanduseFeaturesee_export.kml',

map: map

});

28 of 32

Export raster�tiles to GCS�(eg: NDVI)

29 of 32

Tiles in GCS

30 of 32

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);

31 of 32

32 of 32

Thank you