morethanamap.com

Tip #1: add some style

var stylesArray =  [
  {
    "featureType": "road",
    "stylers": [
      { "hue": "#08ff00" },
      { "saturation": -57 },
      { "lightness": -13 }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];
map.setOptions({styles: styles});
       Styled Map Wizard 
     

what to do when there is not much to display

a marker

Tip #2: use a simple static map for one marker cases


?center=53.012,18.589
  &zoom=15
  &size=600x280
  &sensor=false
  &markers=color%3A0xFFFD81%7Clabel%3AT%7C53.012%2C18.589 
color:0xFFFD81|label:T|53.012,18.589

Tip #1 + Tip #2 : styled static map


?center=53.012,18.589..
  style=feature:road|saturation:-100|lightness:-8&style=feature:landscape.natural|
  saturation:-100&style=feature:landscape.man_made|saturation:-100|lightness:-13

Tip #3 : Take advantage of the Places API library

Places API library

service.nearbySearch for a given location

service.textSearch for a given string eg. pasta in Florence

service.getDetails for a place id


var request = {
    location:  new google.maps.LatLng(-33.8665433,151.1956316),
    radius: '500', 
    types: ['store']};
var request = {
          radius: '500',
          query: 'restaurant in Zurich'
         };
          
var request = {
  reference: 'CnRkAAAAGnBVNFDe...'
};

Forms that fill themselves

      autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        fillInAddress();
       });
      

Parsing the response

<input class="field" id="route" disabled="true">
      "result" : {
      "address_components" : [
         {
            "long_name" : "110",
            "short_name" : "110",
            "types" : [ "street_number" ]
         },
         {
            "long_name" : "Brandschenkestrasse",
            "short_name" : "Brandschenkestrasse",
            "types" : [ "route" ]
         } ...
      " : "OK"
}
There is no such thing as information overload, only bad design.
Edward Tufte

Too many markers!

managing a lot of point data

 var markers = {
  'countries': [
    {
      'name': 'Australia',
      'location': [-25.274398, 133.775136]
    },
    {
      'name': 'La Svizra',
      'location': [46.818188, 8.227512]
    }...
    'places': [
    {
      'name': 'Alcatraz',
      'location': [37.8266636, -122.4230122]
    },
    {
      'name': 'Baker beach',
      'location': [37.794191, -122.4832446]
    },...
  ]
};

Custom Icon - Symbol

 new google.maps.Marker({
...
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8
  }
});

Marker Manager

Show only a subset of markers until a given zoom level

InformationOverload

Marker Manager

          markers['countries'] = list of google markers
          markers['places'] = list of google markers
        

Now for each zoom level, decide what markers you want to show

mgr = new MarkerManager(map, {trackMarkers: true, maxZoom: 15});
google.maps.event.addListener(mgr, 'loaded', function() {
  mgr.addMarkers(markers.countries, 0, 5); // (list_of_markers,min_zoom_level, max_zoom_level)
  mgr.addMarkers(markers.places, 6, 11);
  mgr.addMarkers(markers.locations, 12);
  mgr.refresh();
});

Marker Clusterer

Grid-based clustering

Marker Clusterer

mc = new MarkerClusterer(map, markers.locations, {maxZoom: 19});

Level of detail is controlled using gridSize

  mc.setGridSize(120)); //Default value is 60, for less detailed results increase the value

styles using style element

{ url: '../images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}

Example to play with

The cool morethanamap example

Population demo

a different perspective: web and depth heatmaps

A colourful depth map of the average of 500 faces by chetbox

New HeatmapLayer in the Maps API

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
</script>
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: [
    new google.maps.LatLng(1, 2),
    new google.maps.LatLng(3, 4),
    new google.maps.LatLng(5, 6)
  ],
  map: map
});

Basic heatmap

Customizing Heatmaps

Weighted Data Points

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: [
    {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
    new google.maps.LatLng(1, 2),
    {location: new google.maps.LatLng(37.782, -122.443), weight: 2}
  ],
  map: map
});

HeatmapLayerOptions

  dissipating : {true|false} // false means layer  will not adapt with zoom level
  gradient: ['rgba(0, 255, 255, 0)','rgba(0, 255, 255, 1)','rgba(0, 191, 255, 1)'...]
  maxIntensity // specyfing a fixed maximum concentration
  opacity :  '0.6'  // number between 0 and 1
  radius // radius influence of each point

dissipating: false

wait! mtm is still much cooler...

just look at this!

To learn more watch The Inner Awesomeness of More than a Map

There's just something hypnotic about maps.
Ken Jennings

Symbols and SVG paths

New Symbols in the Maps API

new google.maps.Marker({
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 10,
    strokeColor: 'white',
    fillColor: 'blue',
    fillOpacity: 1
  },
});
   google.maps.SymbolPath.CIRCLE,
   BACKWARD_CLOSED_ARROW, BACKWARD_OPEN_ARROW,
   FORWARD_CLOSED_ARROW, FORWARD_OPEN_ARROW
  

SVG Path data

SVG

<line x1 y1 x2 y2>
<rect x y width height>
<circle cx cy r>
<path d>
<image x y width height xlink:href>
<svg>
        <rect x="5" y="5" width="140" height="140" stroke="#000000"
        stroke-width="4" fill="#AAAAFF" opacity="1"/>
</svg>

Symbols can be paths

 icon: {
  path: 'm16.2471,46.46457l-0.13947,-26.33734c-0.02 ...z',
  fillColor: "#6199DF",
  fillOpacity: 0.8,
  scale: 1,
  strokeColor: "gold",
  strokeWeight: 4
}; 

Paths can be created/edited with online SVG editors

Airports size and traffic

Adding symbols to polylines

new google.maps.Polyline({
  path: ...,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
      strokeColor: '#ff0000',
      scale: 4
    },
    offset: '50px',
    repeat: '100px'
  }],
  ...
});

Fun with google.maps.Polyline

icons: [{
  icon: {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
  },
  repeat: '0'
}]
icons: [{
  icon: {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
  },
  repeat: '25%'
}]
icons: [{
  icon: {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
  },
  repeat: '50px'
}]
icons: [{
  icon: ...
  offset: '0',
  repeat: '100px'
}]
icons: [{
  icon: ...
  offset: '50px',
  repeat: '100px'
}]

Adding symbols to directions

  var request = {
          origin: 'Florence, Italy', destination: 'Via Tommaso Campanella, Florence, Italy',
          travelMode: google.maps.TravelMode.DRIVING
        };
var renderer = new google.maps.DirectionsRenderer({
            map: map,
            polylineOptions: {
              strokeColor: '#C71585',
              icons: [{
                icon: {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, fillOpacity: 1, scale: 3
                },
                repeat: '140px', offset: '64px'
              }]
            }
          });

Using the MapLabel library and symbols

drivingLabel = new MapLabel({
          position: new google.maps.LatLng(37.7917, -122.4248),
          text: 'Driving',
          fontFamily: '\'Londrina Sketch\', sans-serif',
          fontSize: 48, 
          align: 'right',
          map: map
        }); 
  new google.maps.DirectionsRenderer({
            map: map,
            suppressMarkers: true,
            suppressBicyclingLayer: true,
            polylineOptions: {
              strokeOpacity: 0,
              icons: icons
            } });

Recap

  • Styled maps
  • Static maps
  • Places api library
  • Handling too many markers
  • Heatmaps
  • Symbols as markers
  • Symbols on polylines

Worth Watching

What's new ?

Time Zone API

          https://maps.googleapis.com/maps/api/timezone/json
        
         location=39.6034810,-119.6822510&timestamp=1331161200&sensor=false
        
{
   "dstOffset" : 3600.0,
   "rawOffset" : -28800.0,
   "status" : "OK",
   "timeZoneId" : "America/Los_Angeles",
   "timeZoneName" : "Pacific Daylight Time"
}
        

M4B: Google Maps Tracks and Geolocation API

Tracks API

designed to help businesses track, analyze, and visualize asset movement.

Uses the concept of entities, collections (of entities), recording crumbs and geofencing to track and manage geo assets.

Geolocation API

location information based on cell towers and WiFi nodes that the mobile client can detect.

   "cellId": 42,
  "locationAreaCode": 415,
  "mobileCountryCode": 310,
  "mobileNetworkCode": 410,
  "signalStrength": -60 

Be the first to know!

+GoogleMapsAPI