Custom Interactive Maps With the Google Maps API

Learning Google Maps API with TutsPlus course Custom Interactive Maps With the Google Maps API

Google Maps API Docs

Setting Up a Key

Make sure you're signed in to your Google account.

Navigate to https://console.developers.google.com/project

From Project Dashboard

• Click 'Enable an API'
• Scroll through the list until "Google Maps JavaScript API v3'
• Click the 'OFF' button to enable it
• Scroll to the top of the list to confirm its now turned ON
• Click on the link 'Google Maps JavaScript API v3'
• Click 'Credentials' from left nav bar
• Click 'Create new Key'
• Then from popup, click 'Browser key'
• Then click 'Create'

Hello Map

Order of element and script loading is VERY IMPORTANT!

First in the html, define a div to contain the map

<div id="map-canvas"></div>

Then reference the google map api javascript

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Then reference the script with custom code to define and load a custom map

<script src="scripts/main.js"></script>

Map Options

Examples

Map Events

For example, register handler for dragend event

var element = document.getElementById('map-canvas');
var gMap = new google.maps.Map(element);
google.maps.event.addListener(gMap, 'dragend', function(e) {
  // do something
});

Map Markers

Must provide a position, and a map to display on. Can also customize the icon by specifying a url to the icon image.

Custom map icons can be found here

Draggable option can be true or false.

var element = document.getElementById('map-canvas');
var gMap = new google.maps.Map(element);
var marker = new google.maps.Marker({
  position: {
      lat: lat,
      lng: lng
    },
    draggable: draggable,
    map: gMap
    icon: '/path/to/custom/icon',
    visible: true
  }
});

Map markers can also have custom options.

Marker Events

Marker events are created in the same way as map events, except attached to the marker object rather than the map object.

Info Window

To define an info window, just need to provide some content

var infoWindow = new google.maps.InfoWindow({
  content: 'Hello this is some information'
});

Then attach the marker to the map, and provide a marker to center its position

infoWindow.open(map.gMap, marker);

This will make the info window open by default. If only want it to open when user clicks on the marker, need to setup an event on the marker.

Content strings for info window can also have html, so they can be styled. For example

var infoWindow = new google.maps.InfoWindow({
  content: '<div class="content">Hello this is some styled content</div>'
});

.content {
  color: red;
}

## Keeping Track of Markers

Googe Maps provides no native method for retrieving a collection of markers currently defined on the map,
therefore, developers must write their own mechanism for keeping track of markers.

To remove a marker from a map, set its map property to null

```javascript
marker.setMap(null);

A marker is assigned to a map, whereas a map is not assigned a marker.

Advanced Marker Organization

Separate out marker organization logic from core map functions, single responsibility prinicple.

For this project, the List module is created to manage any collection, including map markers.

Marker Clustering

Several markers in small area (especially as user zooms out) will overlap each ohter. This can be fixed with clustering.

Clustering is not part of google maps by default, an extra library must be included.

Additional utility libraries available here

Map Clusterer

Sample usage

// constructor takes a map and array of markers (could be empty)
var mapClusterer = new MarkerClusterer(map, markers);
var marker = ... // code to create a marker
markerClusterer.addMarker(marker);

Cluster color can be modified to reflect density.

Map Widget

Build a jQuery UI Widget to make working with map library easier.

Code | Usage

Street View Panorama

pov is point of view. Consists of heading to specify number of degrees to the right, and pitch to specify number of degrees up (positive) or down (negative).

Events

• position_changed
• pov_chnaged
• links_changed (fires whenever street is changed)

Geocoding

Converting address to geographic co-ordinates (lat/lng).

Google geocoder function is asynchronous, therefore must provide callbacks for success and error handling.

Custom Styles

Docs | Reference

Can change colors of components on map.

Define an array of objects, and set that as the map style.