Para listar um heatmap o Google Maps exige que os dados estejam em uma Google Fusion Table enquanto que o Nokia Maps permite outras formas de carregamento.
Por esse motivo, excepcionalmente, os dois mapas serão diferentes, pois possuem fontes de dados diferentes. Os dados do exemplo estão em um javascript de nome earthquakes.js, disponível em /samples/heatmap/earthquakes.js
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10, -100),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'location',
from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
function nokiaMaps()
{
nokia.Settings.set( "appId", "_peU-uCkp-j8ovkzFGNU");
nokia.Settings.set( "authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
components: [
// Add the behavior component to allow panning / zooming of the map
new nokia.maps.map.component.Behavior()
],
zoomLevel: 2
});
var heatmapProvider;
try {
// Creating Heatmap overlay
heatmapProvider = new nokia.maps.heatmap.Overlay({
// This is the greatest zoom level for which the overlay will provide tiles
max: 20,
// This is the overall opacity applied to this overlay
opacity: 0.6,
// Defines if our heatmap is value or density based
type: "value",
// Coarseness defines the resolution with which the heat map is created.
coarseness: 2
});
} catch (e) {
// The heat map overlay constructor throws an exception if there
// is no canvas support in the browser
alert(e);
}
// Only start loading data if the heat map overlay was successfully created
if (heatmapProvider) {
/* We load a data file containing data points for the heat map
* LoadScript is an helper function and not part of the Nokia Maps API
* See exampleHelpers.js for implementation details
*/
loadScript(
"earthquakes.js",
function () {
/**
* Filtering data to show only eartquakes with magnitud above 1.5. Variable data comes from script inserted in head (heatmap.js)
* This file is array of objects like:
* data = [
* {latitude: 53, longitude: 13: value 5.3},
* ....
* ];
*/
for (var i = 0; i < data.length; i++) {
if (data[i].value < 1.5) {
data.splice(i, 1);
}
}
// Rendering the heat map overlay onto the map
heatmapProvider.addData(data);
map.overlays.add(heatmapProvider);
}
);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#map_canvas {
width: 400px;
height: 400px;
left: 0px;
top: 0;
position: absolute;
}
#mapContainer {
width: 400px;
height: 400px;
left: 450px;
top: 0;
position: absolute;
}
</style>
<!-- chamada à api do Google Maps e código que mostra o mapa do Google Maps. Coloquei em JS separados para não ficar muito confuso aqui -->
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" src="google.js"></script>
<!-- Clamada a API do Nokia Maps e código que mostra o mapa do Nokia Maps-->
<script type="text/javascript" src="exampleHelper.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0//jsl.js?with=all"></script>
<script type="text/javascript" src="nokia.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<div id='mapContainer'> </div>
<script type="text/javascript">
nokiaMaps();
</script>
</body>
</html>