I have a button which adds a heatmaplayer to my map. When pressing it twice. There are 2 heatmaplayers stacked. When pressing the delete heatmaplayer button only 1 heatmaplayer get's deleted. Why is that so? How can i delete all stacked heatmaps with one click?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
</head>
<body>
<div id="floating-panel">
<button onclick="createHeatmap()">Create Heatmap</button>
<button onclick="deleteHeatmap()">Delete Heatmap</button>
</div>
<div id="map" style="height: 600px; width: 800px;"></div>
<script>
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
function createHeatmap(){
var heatmapdata = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapdata,
});
heatmap.setMap(map);
}
function deleteHeatmap(){
heatmap.setMap(null);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
</script>
</body>
</html>
You have to keep track of all the "layers" that you create, and then no matter how much heatmap you add, you just erase them with a for loop (looping through an array of created heatmaps).
This is the main function which nullifies the heatmaps and empties the array so when you start all over the array also starts from zero-index:
function deleteHeatmap(){
for (var k = 0; k < array.length; k++) {
array[k].setMap(null);
}
array=[];
}
Here is the example in the fiddle: https://jsfiddle.net/eugensunic/3q6etox0/3/
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
</head>
<body>
<div id="floating-panel">
<button onclick="createHeatmap()">Create Heatmap</button>
<button onclick="deleteHeatmap()">Delete Heatmap</button>
</div>
<div id="map" style="height: 600px; width: 800px;"></div>
<script>
var map, heatmap;
var heatmapdata;
var array=[];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
function createHeatmap(){
heatmapdata = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapdata,
});
array.push(heatmap);
heatmap.setMap(map);
}
function deleteHeatmap(){
for (var k = 0; k < array.length; k++) {
array[k].setMap(null);
}
array=[];
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=visualization&callback=initMap">
</script>
</body>
</html>
You need to either delete (remove from the map) any existing heatmap before you create a new one (losing access to the original) or only allow a single heapmap to be created.
proof of concept fiddle
code snippet:
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 37.775,
lng: -122.434
},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
function createHeatmap() {
if (!heatmap || !heatmap.getMap || heatmap.getMap() == null) {
var heatmapdata = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapdata,
});
heatmap.setMap(map);
}
}
function deleteHeatmap() {
heatmap.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="floating-panel">
<button onclick="createHeatmap()">Create Heatmap</button>
<button onclick="deleteHeatmap()">Delete Heatmap</button>
</div>
<div id="map" style="height: 600px; width: 800px;"></div>
Related
I am building a map with some markers, which when clicked open a link.
After some research around here I have something that does what i need.
Not having much experience, I am stack with some changes I would like to make, so any help will be very welcome.
This is my 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="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var points = [
['prop1', 59.9362384705039, 30.19232525792222, 12, 'https://www.google.com'],
['prop2', 59.941412822085645, 30.263564729357767, 11, 'https://www.google.com'],
['prop3', 59.939177197629455, 30.273554411974955, 10, 'https://www.google.com']
];
function setMarkers(map, locations) {
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shape: shape,
title: place[0],
zIndex: place[3],
url: place[4]
});
google.maps.event.addListener(marker, 'click', function() {
window.open(this.url);
});
}
}
function initialize() {
var myOptions = {
center: new google.maps.LatLng(59.91823239768787, 30.243222856188822),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
setMarkers(map, points);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:75%; height:75%">
</body>
</html>
So now I am trying to do a couple of things:
I would like to call the points variables from an external xml file.
My links will look like this: http://www.somefixedlink/someuniquesequence.
How can it up so i only load from the xml the "someuniquesequence", and the rest of the link is added?
Thank you in advance,
iPanos
The script isn't rendering the map.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
margin: 0;
padding: 0;
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div style= "Height:100% Width:100%;">
<div id ="map-canvas"></div></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
//I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost.
</script>
<script type ="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -27.3818611, lng: 152.7130136},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
{lat: -25.363, lng: 131.044, Name: "Uluru"},
{lat:-24.363, lng: 131.044, Name: "Placeland"}];
var marker, i;
var markers = new Array();
for(var i=0; i<crimes.length; i++){
var marker = new google.maps.Marker({
position: places[i].lat, places[i].lng,
map: map,
title: places[i].Name
//I am trying to get a marker with this but am not sure if the code is incorrect.
});
}
}
</script>
</body>
</html>
document.getElementById('map') should be document.getElementById('map-canvas')
Nevermind I fixed it.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script type ="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -24.363, lng: 131.044},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
{lat: -25.363, lng: 131.044, Name: "Uluru"},
{lat:-24.363, lng: 131.044, Name: "Placeland"}];
var marker, i;
var markers = new Array();
for(var i=0; i<places.length; i++){
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: places[i].Name
//I am trying to get a marker with this but am not sure if the code is incorrect.
});
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
//I am not sure what going on for some reason the map will not load and I am not sure if it is because of issues with my formatting or what, but I am lost.
</script>
</body>
</html>
The issue was with not closing brackets etc.
I have made a map with Google from this:
Google API
But I would like to put in 8 more pins, that should illustrate the places I have been in the world. But I dont have an idea if I can do that from that code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var place_1 = {lat: -25.363, lng: 131.044};
var place_2 = {lat: 55.971232, lng: 9.854725};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&callback=initMap">
</script>
</body>
</html>
You can use as many markers as you want:
function initMap() {
//this is different:
var places = new Array();
places.push({lat: -25.363, lng: 131.044});
places.push({lat: 55.971232, lng: 9.854725});
//push all of remaining places
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
//and this is different:
var markers = new Array();
for(var i = 0; i < places.length; i++){
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(places[i].lat, places[i].lng),
map: map,
title: 'Hello World!'
}));
}
}
Problem: I am trying to add markers and polylines into my map using Google maps v3 but it doesn't work. It is actually not rendering anything and I have been following the Google doc and I have a valid API key so no idea... Suggestions? Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(42.0, 10.0),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var points = [
new google.maps.LatLng(39.0, -3.0),
new google.maps.LatLng(52.1, 12.1),
new google.maps.LatLng(40.2, 32.7)
];
var markers = [];
var path = [];
for (var i = 0; i < points.length; ++i) {
var marker = new google.maps.Marker({map: map, position: points[i]});
markers.push(marker);
path.push(marker.position);
}
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000"
});
polyline.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6SfOqSpJQa45i0LWO-9zSrV9HDPzACYg&signed_in=true&callback=initMap"></script>
</body>
</html>
As Dr.Molle observed in his comment: the ID of the map-container is map , not map_canvas
function initMap() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(42.0, 10.0),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var points = [
new google.maps.LatLng(39.0, -3.0),
new google.maps.LatLng(52.1, 12.1),
new google.maps.LatLng(40.2, 32.7)
];
var markers = [];
var path = [];
for (var i = 0; i < points.length; ++i) {
var marker = new google.maps.Marker({map: map, position: points[i]});
markers.push(marker);
path.push(marker.position);
}
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000"
});
polyline.setMap(map);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
I want to show a Google Map, I have this code which does no work:
<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div>
...
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY_is_setup_correctly"></script>
<script type="text/javascript">
function initialize(){
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758),
};
var map = google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
When I refresh my page I see no map and JavaScript console throws me this message:
GET http://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot2&rt=main.102 [HTTP/1.1 204 No Content 428ms]
Why my code fails?
You need to create a new instance of the Map class.
Instead of:
var map = google.maps.Map(map_container, settings);
Write:
var map = new google.maps.Map(map_container, settings);
You have a typo in your code, you are missing new before the google.maps.Map constructor. Your code should be:
function initialize() {
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758)
};
// add "new" before google.maps.Map constructor
var map = new google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
code snippet:
function initialize() {
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758)
};
var map = new google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div>