Using Google API Heat Maps

Google HeatMaps

P.S full code at bottom of page

Step 1 :- Add Reference to Google JavaScript API

<script src=”https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization ” type=”text/javascript”></script>

Parameters Explained:

1. Sensor (Obligatory)

Sensor can be either set to true or false to inform the API if the maps are being accessed from a device with location such as a smart phone or not such as a desktop.

If the sensor parameter is not passed, the API will return a “Request Denied” error.

2. libraries(optional)

When references Google API, we are still not loading everything. Therefore, we can load these libraries using parameters in the URL. The Visualization library is required when we want to visualize some sort of data using markers, heat maps, or circle size maps.

Step 2 :- Initialize data

<script type=”text/javascript”>

var map;

var heatmapData = [

new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(36.778261, -119.417932),
new google.maps.LatLng(40.714353, -74.005973),
new google.maps.LatLng(40.728157, -74.077642),
new google.maps.LatLng(40.789142, -73.13496),
new google.maps.LatLng(26.705621, -80.03643),
new google.maps.LatLng(38.80261, -116.419389),
new google.maps.LatLng(48.856614, 2.352222),
new google.maps.LatLng(35.874379, 14.393865),
new google.maps.LatLng(42.650665, 18.094423),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(40.728157, -74.077642),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(40.714353, -74.005973),
new google.maps.LatLng(51.511214, -0.119824),
new google.maps.LatLng(52.130661, -3.783712),
new google.maps.LatLng(30.375321, 69.345116),
new google.maps.LatLng(-37.814107, 144.96328),
new google.maps.LatLng(33.867487, 151.20699),
{ location: new google.maps.LatLng(40.416775, -3.70379), weight: 6 },
{ location: new google.maps.LatLng(41.385064, 2.173403), weight: 2 },
{ location: new google.maps.LatLng(52.130661, -3.783712), weight: 2 },
{ location: new google.maps.LatLng(55.378051, -3.435973), weight: 8 },
{ location: new google.maps.LatLng(-40.900557, 174.885971), weight: 6 },
{ location: new google.maps.LatLng(40.714353, -74.005973), weight: 6 }

];

</script>

Script Explained:

1. Map: Will be used to set map

2. heatmapData

An array of latitudes and longitudes to show heat on map all around the World (America, Europe, Australia, etc)

This can be replaced with any data made of latitudes and longitudes from database, web services, etc.

3. new google.maps.LatLng(37.782, -122.447)

Sets the latitude and longitude of a point

4.{ location: new google.maps.LatLng(40.714353, -74.005973), weight: 6 }

Just as in 3 this sets the latitude and longitude of a point on the map, however, using the additional weight.

Weight defines the amount of points with that same LatLng, therefore 4 is just like pasting 3 for six times (since we set it to weight: 6)

Additional Note: To get the geolocations of cities or towns you can use Batch Geocodes by entering a different town/city name in seperate lines, it will return all latitudes and longitutes you requested.

Step 4 :- Add the Initialize Map Function to the JavaSript

function initializeMap() {

var myMapOptions = {

zoom: 4,
center: new google.maps.LatLng(40.785611, -25.94700),
mapTypeId: google.maps.MapTypeId.TERRAIN //Map Type (TERRAIN, ROADMAP, SATELLITE, HYBRID)
};

map = new google.maps.Map(document.getElementById(‘map’), myMapOptions);

var heatmap = new google.maps.visualization.HeatmapLayer({

data: heatmapData,
dissipating: false,
map: map
});

}

Function Explained:

1. myMapOptions: sets the focus location on the world map using latitudes and longitudes, sets the zoom level and the map type.

  • Zoom: the smaller the zoom, the bigger map coverage there is. If you want to zoom into a specific city, zooming has to be at least 11.
  • center: using new google.maps.LatLng() we can specify which part of the map we want to show on load.
  • mapTypeId: refers to the type of map we want to display. Options are:
    • TERRAIN – landscape view (rivers, mountains, etc)
    • ROADMAP – street view in 2D
    • SATELLITE – Real World View (photorealistic – you can see houses and parks, etc)
    • HYBRID – Real World View with roads and city names (photorealistic with roads and city names)
  • Other Optional Parameter Options:
    • disableDefaultUI: true or false (default is true) – shows the map view option at the top right corner

2.google.maps.Map: initializing actual google map providing the divider where the map will be loaded in and the options for the map we set about (zoom, mapType, etc)

3. HeatmapLayer

  • data – the array with latitudes and longitudes (heatmapData)
  • dissipating – true or false – default is false – when false the radius of heat patches increases with zoom level to provide a high color intensity when viewing a large geographic area.
  • map – specifies which google.maps.Map we will use. In this case we declared it before to var map to set divider for map and options.
  • Other Optional HeatmapLayer Options:
    • gradient: to customize the color gradient of the heatmap using a string array of css colours.
    • opacity: the transparency/ opacity of the heatmap between 0 and 1  (zero being fully transparent and one being fully solid with no transparency – example: 0.8 slightly transparent)

Step 4:- Add event DomListener

google.maps.event.addDomListener(window, ‘load’, initializeMap);

Explained:

setting the event domListener at the bottom, will define what should be done when page(window – first parameter) has loaded (load – second parameter). In this case we will call our initializeMap function (third parameter)

Step 5:- Adding the Divider to load Map in

In the body of the html add simple divider with id map:

<div id=”map”></div>

References:

Google API Getting Started Documentation:

Batch Geocoding:

Full HTML Page should look like:

<!DOCTYPE html>

<html>
<head>

<title>rochcass – Google Map API – HeatMap</title>
<style type=”text/css”>body, #map {margin: 0;padding: 0;height: 100%; width: 100%;}</style>
<script src=”https://maps.googleapis.com/maps/api/js?sensor=true&libraries=visualization&#8221; type=”text/javascript”></script>
<script type=”text/javascript”>

var map;

var heatmapData = [

new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(36.778261, -119.417932),
new google.maps.LatLng(40.714353, -74.005973),
new google.maps.LatLng(40.728157, -74.077642),
new google.maps.LatLng(40.789142, -73.13496),
new google.maps.LatLng(26.705621, -80.03643),
new google.maps.LatLng(38.80261, -116.419389),
new google.maps.LatLng(48.856614, 2.352222),
new google.maps.LatLng(35.874379, 14.393865),
new google.maps.LatLng(42.650665, 18.094423),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(40.728157, -74.077642),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(40.714353, -74.005973),
new google.maps.LatLng(51.511214, -0.119824),
new google.maps.LatLng(52.130661, -3.783712),
new google.maps.LatLng(30.375321, 69.345116),
new google.maps.LatLng(-37.814107, 144.96328),
new google.maps.LatLng(33.867487, 151.20699),
{ location: new google.maps.LatLng(40.416775, -3.70379), weight: 6 },
{ location: new google.maps.LatLng(41.385064, 2.173403), weight: 2 },
{ location: new google.maps.LatLng(52.130661, -3.783712), weight: 2 },
{ location: new google.maps.LatLng(55.378051, -3.435973), weight: 8 }, //Instead of writing 8 times we use {location: latlng, weight: 8}
{ location: new google.maps.LatLng(-40.900557, 174.885971), weight: 6 },
{ location: new google.maps.LatLng(40.714353, -74.005973), weight: 6 }

];

function initializeMap() {

var myMapOptions = {

zoom: 4,
center: new google.maps.LatLng(40.785611, -25.94700), //zooms between America and Europe
mapTypeId: google.maps.MapTypeId.TERRAIN //Map Type (TERRAIN, ROADMAP, SATELLITE, HYBRID)

};

map = new google.maps.Map(document.getElementById(‘map’),myMapOptions);
var heatmap = new google.maps.visualization.HeatmapLayer({

data: heatmapData,
dissipating: false,
map: map
});

}

google.maps.event.addDomListener(window, ‘load’, initializeMap);

</script>

</head>

<body>

<div id=”map”></div>

</body>
</html>

View Live Demo Here

Thank You

Hope this was helpful for you, if you get a free minute like my page on facebook from the right panel or by visiting my page here

//

Advertisements

3 thoughts on “Using Google API Heat Maps

  1. Pingback: Google Maps has a heatmap layer option now | Jim Smiley's Blog
  2. I tried the code from your example and all I’m getting is a white page. I tried customizing a few things to see if my api key would work, but nothing helped. I’ve been trying to do exactly what you have here, and had hoped that you had the best tutorial so far. The explanations really helped, but I can’t figure out why it’s not working.

    • Hi Paul, yes I have a feeling that you might have copied the “Full HTML Page should look like” part directly which usually would cause some issues such as double quotes and single quotes change, etc. I have tried copying that part into a new page myself, and had to fix the following:

      1.All double Quotes since they where all as follows: ”
      2.All single Quotes since they where as follows: ‘
      3.The end of the google api link in the script tag since the last double quote of the src seemed to have been pasted as ” rather than “.

      I have also Uploaded the sample online at the bottom of the article.

      Goodluck

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s