The Simplest Way of Showing A Map

Basic Map

Everything in tag and attributes.

Showing Pixel And Tile Coordinates

Showing static coordinates of Chicago

Chicago, IL
LatLng: {{chicago.lat()}}, {{chicago.lng()}},
World Coordinate: {{worldCoordinate.x}}, {{worldCoordinate.y}},
Pixel Coordinate: {{pixelCoordinate.x}}, {{pixelCoordinate.y}},
Tile Coordinate: {{tileCoordinate.x}}, {{tileCoordinate.y}} at Zoom Level {{map.getZoom()}}

Simple Click Event

Click the marker to zoom and drag and watch it comes back after 3 seconds.

Assigning arguments in UI events

When zoom level changed, the contents of infoWindow also updates.

Change the zoom level

Adding state to controls

Adds a control to the map that returns the user to the control's defined home

Go Home

Set Home

Styled Map

Styled maps allow you to customize the presentation of the standard Google base maps.

Simple Marker

A marker identifies a location on a map. By default, a marker uses a standard image.

Icon

In the most basic case, an icon can simply indicate an image to use instead of the default Google Maps pushpin icon.

Info Windows

This example displays a marker at the center of Australia. When the user clicks the marker, an info window opens.

Uluru

Uluru, also referred to as Ayers Rock, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia.

Attribution: Uluru, http://en.wikipedia.org/w/index.php?title=Uluru (last visited June 22, 2009).

More examples at
http://ngmap.github.io

{{ mainTitle }}