I am trying to create a heat map using Google Maps API. I am getting the map but not the heat values on the co-ordinates. Given below ids the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src=";sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(8.881928, 76.592758),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = ";sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<script>
var heatMapData = [
{location: new google.maps.LatLng(8.8678, 76.5623 },
{location: new google.maps.LatLng(9.5674, 77.5623)},
{location: new google.maps.LatLng(10.7821, 78.447)},
{location: new google.maps.LatLng(12.4523, 79.443)},
{location: new google.maps.LatLng(37.782, -122.441)},
{location: new google.maps.LatLng(37.782, -122.439)},
{location: new google.maps.LatLng(37.782, -122.435)},
{location: new google.maps.LatLng(37.785, -122.447)},
{location: new google.maps.LatLng(37.785, -122.445)},
{location: new google.maps.LatLng(37.785, -122.441)},
{location: new google.maps.LatLng(37.785, -122.437)},
{location: new google.maps.LatLng(37.785, -122.435)}
];
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setOptions({radius: heatmap.get('20')});
heatmap.setMap(map);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is the screenshot of the output. Could anyone help me in this?
I am trying to create a heat map using Google Maps API. I am getting the map but not the heat values on the co-ordinates. Given below ids the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis./maps/api/js?key=APIKEY&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(8.881928, 76.592758),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis./maps/api/js?key=APIKEY&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<script>
var heatMapData = [
{location: new google.maps.LatLng(8.8678, 76.5623 },
{location: new google.maps.LatLng(9.5674, 77.5623)},
{location: new google.maps.LatLng(10.7821, 78.447)},
{location: new google.maps.LatLng(12.4523, 79.443)},
{location: new google.maps.LatLng(37.782, -122.441)},
{location: new google.maps.LatLng(37.782, -122.439)},
{location: new google.maps.LatLng(37.782, -122.435)},
{location: new google.maps.LatLng(37.785, -122.447)},
{location: new google.maps.LatLng(37.785, -122.445)},
{location: new google.maps.LatLng(37.785, -122.441)},
{location: new google.maps.LatLng(37.785, -122.437)},
{location: new google.maps.LatLng(37.785, -122.435)}
];
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setOptions({radius: heatmap.get('20')});
heatmap.setMap(map);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is the screenshot of the output. Could anyone help me in this?
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Jan 10, 2013 at 7:25 Aravind AsokAravind Asok 5121 gold badge7 silver badges18 bronze badges2 Answers
Reset to default 3According to the Google Maps API documentation, you should be passing an array of google.maps.LatLng objects to the HeatmapLayer as data.
Try this:
var heatMapData = [
new google.maps.LatLng(8.8678, 76.5623),
new google.maps.LatLng(9.5674, 77.5623),
new google.maps.LatLng(10.7821, 78.447),
new google.maps.LatLng(12.4523, 79.443),
new google.maps.LatLng(37.782, -122.441),
new google.maps.LatLng(37.782, -122.439),
new google.maps.LatLng(37.782, -122.435),
new google.maps.LatLng(37.785, -122.447),
new google.maps.LatLng(37.785, -122.445),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(37.785, -122.435)
];
Also, you need to load the google.maps.visualization library by adding &libraries=visualization to the end of the URL when you include the Google Maps API.
Working example: http://jsfiddle/EBQQH/
You are forget to put the ending bracket here {location: new google.maps.LatLng(8.8678, 76.5623_ _ _},
that is the problem
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744921546a4601163.html
评论列表（0条）