Google Maps JavaScript API v3

Alex Jolicoeur

Google Maps JavaScript API v3

Lets you embed and manipulate Google maps within your web pages.

Version 3 of the API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications.

The utilites and services available are nearly identical to those of https://maps.google.com

Loading the API

An API key is easily obtained from your google developer API console. It is not required since the API service is free, but recommended in order to track usage.

​

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE">

</script>

​

sensor indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location.

Loading the API Asynchronously

You may want to load the Maps API after your page has fully loaded, or on demand (using window.onload) and to write the Maps JavaScript API into a <script> tag within the page.

​

Additionally, you can instruct the API to only execute the map's initialize() function after the API has fully loaded by passing "callback=initialize" to the Maps API bootstrap.

​

http://people.ucsc.edu/~ajolicoe/googleAPI/basic/asyncMap.html

Map DOM and Options

To display the map, you must create a spot in the DOM for it

(in this case a 'div' element):

​

<div id="map_canvas" style="width: 100%; height: 100%"></div>

​

Before creating the map, we can define options for it:

​

var mapOptions = {

center: new google.maps.LatLng(-34.397, 150.644),

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

​

​

​

Map Options continued

center: (latitude, longitude) can be looked up using geolocation service.

​

zoom: when 0, map image is fully zoomed out.

​

mapTypeId:

• ROADMAP displays the normal, default 2D tiles of Google Maps.
• SATELLITE displays photographic tiles.
• HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
• TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).

​

The Map Object and Events

var map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

​

Each Map object exports a number of named events.You can register JavaScript event listeners for those events and execute code when those events are received by registering addListener() event handlers on the google.maps.event namespace.

​

UI Events:

(click, dblclick, mouseup, mousedown, mouseover, mouseout, etc)

google.maps.event.addListener(map, 'click', function(e) {� placeMarker(e.latLng, map);�});

http://people.ucsc.edu/~ajolicoe/googleAPI/events/addMarker.html

​

Map Events continued

MVC State Change Events:

When an object's property changes, the API will trigger an event that the property has changed.

For example: 'zoom_changed' event executes when the map's zoom level changes. Also have bounds_changed and center_changed.You will want to inspect the property that changed on an MVC state change by calling the appropriate getProperty method on that object.

​

google.maps.event.addListener(map, 'zoom_changed', function() {

var zoomLevel = map.getZoom();

map.setCenter(myLatLng);

infowindow.setContent('Zoom: ' + zoomLevel);

});

http://people.ucsc.edu/~ajolicoe/googleAPI/events/simpleEvent.html

​

​

​

Map Controls

in mapOptions: 'disableDefaultUI: false' will display the default controls on the map.

​

• The Zoom control displays a slider (for large maps) or small "+/-" buttons (for small maps) to control the zoom level of the map. This control appears by default in the top left corner of the map on non-touch devices or in the bottom left corner on touch devices.
• The Pan control displays buttons for panning the map. This control appears by default in the top left corner of the map on non-touch devices. The Pan control also allows you to rotate 45° imagery, if available.
• The Scale control displays a map scale element. This control is not enabled by default.
• The MapType control lets the user toggle between map types (such as ROADMAP and SATELLITE). This control appears by default in the top right corner of the map.

More controls

• The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View. This control appears by default in the top left corner of the map.
• The Rotate control contains a small circular icon which allows you to rotate maps containing oblique imagery. This control appears by default in the top left corner of the map.
• The Overview Map control displays a thumbnail overview map reflecting the current map viewport within a wider area. This control appears by default in the bottom right corner of the map, and is by default shown in its collapsed state.

​

​

http://people.ucsc.edu/~ajolicoe/googleAPI/controls/simpleControls.html

​

Layers

• KmlLayer objects render KML and GeoRSS elements into a Maps API V3 tile overlay.
• HeatmapLayer objects renders geographic data using a Heatmap visualization.
• FusionTablesLayer objects render data Google Fusion Tables.
• TrafficLayer object renders a layer depicting traffic conditions and overlays representing traffic.
• TransitLayer object displays the public transport network of your city.

​

http://people.ucsc.edu/~ajolicoe/googleAPI/layers/trafficLayer.html

More Layers

• WeatherLayer and CloudLayer objects allow you to add weather forecasts and cloud imagery to your map.
• BicyclingLayer object renders a layer of bike paths and/or bicycle-specific overlays into a common layer.
• PanoramioLayer object adds photos from Panoramio.com as a layer.
• DemographicsLayer object renders United States demographic information as a layer. (business accounts only)

​

http://people.ucsc.edu/~ajolicoe/googleAPI/layers/weatherLayer.html

​

​

The Aerial View

You can disable 45° imagery by calling setTilt(0) on the Map object.

​

To enable 45° perspective imagery for supported map types: setTilt(45)

​

To orient map towards one of the cardinal directions: setHeading(90)

​

http://people.ucsc.edu/~ajolicoe/googleAPI/basic/aerial45.html

http://people.ucsc.edu/~ajolicoe/googleAPI/basic/aerialRotate.html

Map Styling

There are two ways to style maps: By setting the .styles property of the map's MapOptions object. Or by creating and defining a StyledMapType and applying it to the map.

​

using the .styles property:

http://people.ucsc.edu/~ajolicoe/googleAPI/styles/asyncStyled.html

​

creating a new StyledMapType:

http://people.ucsc.edu/~ajolicoe/googleAPI/styles/asyncStyled2.html

​

​

Map Overlays

markers, symbols, polylines, polygons, circles, user-editable shapes, info windows, and ground overlays.

​

To set an overlay: To remove and overlay:

overlay.setMap(map) overlay.setMap(null)

​

markers example:

http://people.ucsc.edu/~ajolicoe/googleAPI/overlays/markerOverlay.html

ground overlay example:

http://people.ucsc.edu/~ajolicoe/googleAPI/overlays/groundOverlay.html

Services

Directions

http://people.ucsc.edu/~ajolicoe/googleAPI/services/directions/directions.html

Distance Matrix

http://people.ucsc.edu/~ajolicoe/googleAPI/services/distance/distance.html

Elevation

http://people.ucsc.edu/~ajolicoe/googleAPI/services/elevation/elevation.html

Geocoding/Reverse Geocoding

http://people.ucsc.edu/~ajolicoe/googleAPI/services/geolocation/geocoder.html

Maximum Zoom Imagery (for satellite photos)

http://people.ucsc.edu/~ajolicoe/googleAPI/services/maxZoom/maxZoom.html

Libraries

adSense: embed ads in your map application

Drawing: provides a graphical interface for users to draw polygons, rectangles, polylines, circles, and markers on the map.

Geometry: provides utility functions for the computation of geometric data on the surface of the Earth. The library includes three namespaces:

• spherical contains spherical geometry utilities allowing you to compute angles, distances and areas from latitudes and longitudes.
• encoding contains utilities for encoding and decoding polyline paths according to the Encoded Polyline Algorithm.
• poly contains utility functions for computations involving polygons and polylines.

Panoramio: allows you to add Panoramio photos as layers to your application

​

More Libraries

Places: With the Places Service you can perform three kinds of searches:

• Nearby Search returns a list of nearby Places based on a user's location.
• Text Search returns a list of nearby Places based on a search string, eg. "Pizza".
• Place Details requests return more detailed information about a specific Place, including user reviews.

The information returned can include establishments — such as restaurants, stores, and offices — as well as 'geocode' results, which indicate addresses, political areas such as towns and cities, and other points of interest.

http://people.ucsc.edu/~ajolicoe/googleAPI/libraries/places/search_places.html

Weather: You can enable the display of weather data or cloud imagery on your map. Enabling the cloud layer will add cloud coverage imagery to your map, visible at zoom levels 0-6. Enabling the weather layer will show current weather conditions from weather.com on your map, including icons that denote sun, clouds, rain and so on.