I have pushed markers into the a markerClusterer. When I click on the markerClusterer I want to display the info of the nmarkers in the cluster. However, when I use the getMarkers() method, it does not give me the info that I stored in marker, only data about the marker itself. Is there any way that I can implement this? https://codesandbox.io/s/joey-gmaps-c5kdf
const markerCluster = new MarkerClusterer(map, [],
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
google.maps.event.addListener(markerCluster, 'clusterclick', function (c) {
console.log('Number of managed markers in cluster: ' + c.getSize());
var m = c.getMarkers();
for (i in m) {
console.log(Object.values(m[i]));
console.log(m[i].getTitle());
console.log(m[i].toString());
}
var p = [];
for (var i = 0; i < m.length; i++) {
p.push(m[i]);
}
});
You can get your markers' information using getMarkers so there may be an issue somewhere in your code implementation that you haven't posted.
Try the following jsfiddle based off of Google's example.
JS code below:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
title: location.lat.toString() + "," + location.lng.toString(),
myObj: { myKey: i }
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
google.maps.event.addListener(markerCluster, 'clusterclick', function(c) {
console.log('Number of managed markers in cluster: ' + c.getSize());
var m = c.getMarkers();
for (let i in m) {
console.log(m[i].getLabel());
console.log(m[i].getTitle());
console.log(m[i].myObj.myKey);
}
});
}
var locations = [{
lat: -31.563910,
lng: 147.154312
},
{
lat: -33.718234,
lng: 150.363181
},
{
lat: -33.727111,
lng: 150.371124
},
{
lat: -33.848588,
lng: 151.209834
},
{
lat: -33.851702,
lng: 151.216968
},
{
lat: -34.671264,
lng: 150.863657
},
{
lat: -35.304724,
lng: 148.662905
},
{
lat: -36.817685,
lng: 175.699196
},
{
lat: -36.828611,
lng: 175.790222
},
{
lat: -37.750000,
lng: 145.116667
},
{
lat: -37.759859,
lng: 145.128708
},
{
lat: -37.765015,
lng: 145.133858
},
{
lat: -37.770104,
lng: 145.143299
},
{
lat: -37.773700,
lng: 145.145187
},
{
lat: -37.774785,
lng: 145.137978
},
{
lat: -37.819616,
lng: 144.968119
},
{
lat: -38.330766,
lng: 144.695692
},
{
lat: -39.927193,
lng: 175.053218
},
{
lat: -41.330162,
lng: 174.865694
},
{
lat: -42.734358,
lng: 147.439506
},
{
lat: -42.734358,
lng: 147.501315
},
{
lat: -42.735258,
lng: 147.438000
},
{
lat: -43.999792,
lng: 170.463352
}
]
If e.g. you click on the blue cluster #3, you'll get the following output logged in the console:
Number of managed markers in cluster: 3
T
-42.734358,147.439506
U
-42.734358,147.501315
V
-42.735258,147.438
Edit: This error appears to be typescript related. There's a solution in related thread custom property with google marker in type script
Please try the code below:
for (var i = 0; i < features.length; i++) {
const marker2 = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
animation: google.maps.Animation.DROP,
map: map
});
marker2.set("customInfo", features[i].location);
console.log("Marker222223", marker2["customInfo"]);
markerCluster.addMarker(marker2);
}
Hope this helps!
While creating markers add object into marker so that each marker will have asociated object with it i.e. customInfo
var marker = new google.maps.Marker({
position: accident_LatLng,
title: accident_title,
map: map,
customInfo: object,
});
to Access marker object use below code. I have created custom array to store marker object.
var markers = cluster.getMarkers();
var markerCustom = [];
for (var i = 0; i < markers.length; i++) {
markerCustom.push(cluster.markers_[i].customInfo)
}
Hope this helps
Reference https://medium.com/#sunil.jadhav38/implementing-marker-clustering-is-angular-using-google-charts-6b62a33f3b61
I am attempting to add a heatmap to an existing leaflet project in Angular 4.2.5/5.2.5 dot net app using leaflet.js (1.3.1), heatmap.js (2.0.5) and leaflet-heatmap.js (1.0.0). I have successfully got leaflet-heatmap working in an Angular 2/3/4/5 project by putting relevant urls in the HEAD tag of my site, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Heatmap</title>
<base href="~/" />
<link rel="stylesheet" href="~/css/leaflet.css" />
<script src="~/scripts/leaflet.js"></script>
<script src="~/scripts/heatmap.js"></script>
<script src="~/scripts/leaflet-heatmap.js"></script>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
</head>
In my heatmap.component page I have:
import { Component } from "#angular/core";
import * as L from "leaflet";
//import "heatmap.js/build/heatmap.min.js";
//import "types.leaflet.heatmap";
//import "leaflet-heatmap/leaflet-heatmap.js";
//import "leaflet-heatmap";
declare var HeatmapOverlay: any;
#Component({
selector: "heatmap-component",
template: `<div class="heatmap" id="map-canvas" style="height:500px;width:500px"></div>`
})
export class HeatmapComponent {
ngOnInit() {
var testData = { max: 8, data: [{ lat: 24.6408, lng: 46.7728, count: 3 }, { lat: 50.75, lng: -1.55, count: 1 }, { lat: 52.6333, lng: 1.75, count: 1 }, { lat: 48.15, lng: 9.4667, count: 1 }, { lat: 52.35, lng: 4.9167, count: 2 }, { lat: 60.8, lng: 11.1, count: 1 }, { lat: 43.561, lng: -116.214, count: 1 }, { lat: 47.5036, lng: -94.685, count: 1 }, { lat: 42.1818, lng: -71.1962, count: 1 }, { lat: 42.0477, lng: -74.1227, count: 1 }, { lat: 40.0326, lng: -75.719, count: 1 }, { lat: 40.7128, lng: -73.2962, count: 2 }, { lat: 27.9003, lng: -82.3024, count: 1 }, { lat: 38.2085, lng: -85.6918, count: 1 }, { lat: 46.8159, lng: -100.706, count: 1 }, { lat: 30.5449, lng: -90.8083, count: 1 }, { lat: 44.735, lng: -89.61, count: 1 }, { lat: 41.4201, lng: -75.6485, count: 2 }, { lat: 39.4209, lng: -74.4977, count: 1 }, { lat: 39.7437, lng: -104.979, count: 1 }, { lat: 39.5593, lng: -105.006, count: 1 }, { lat: 45.2673, lng: -93.0196, count: 1 }, { lat: 41.1215, lng: -89.4635, count: 1 }, { lat: 43.4314, lng: -83.9784, count: 1 }, { lat: 43.7279, lng: -86.284, count: 1 }, { lat: 40.7168, lng: -73.9861, count: 1 }, { lat: 47.7294, lng: -116.757, count: 1 }, { lat: 47.7294, lng: -116.757, count: 2 }, { lat: 35.5498, lng: -118.917, count: 1 }, { lat: 34.1568, lng: -118.523, count: 1 }, { lat: 39.501, lng: -87.3919, count: 3 }, { lat: 33.5586, lng: -112.095, count: 1 }, { lat: 38.757, lng: -77.1487, count: 1 }, { lat: 33.223, lng: -117.107, count: 1 }, { lat: 30.2316, lng: -85.502, count: 1 }, { lat: 39.1703, lng: -75.5456, count: 8 }, { lat: 30.0041, lng: -95.2984, count: 2 }, { lat: 29.7755, lng: -95.4152, count: 1 }, { lat: 41.8014, lng: -87.6005, count: 1 }, { lat: 37.8754, lng: -121.687, count: 7 }, { lat: 38.4493, lng: -122.709, count: 1 }, { lat: 40.5494, lng: -89.6252, count: 1 }, { lat: 42.6105, lng: -71.2306, count: 1 }, { lat: 40.0973, lng: -85.671, count: 1 }, { lat: 40.3987, lng: -86.8642, count: 1 }, { lat: 40.4224, lng: -86.8031, count: 4 }, { lat: 47.2166, lng: -122.451, count: 1 }, { lat: 32.2369, lng: -110.956, count: 1 }, { lat: 41.3969, lng: -87.3274, count: 2 }, { lat: 41.7364, lng: -89.7043, count: 2 }, { lat: 42.3425, lng: -71.0677, count: 1 }, { lat: 33.8042, lng: -83.8893, count: 1 }, { lat: 36.6859, lng: -121.629, count: 2 }, { lat: 41.0957, lng: -80.5052, count: 1 }, { lat: 46.8841, lng: -123.995, count: 1 }, { lat: 40.2851, lng: -75.9523, count: 2 }, { lat: 42.4235, lng: -85.3992, count: 1 }, { lat: 39.7437, lng: -104.979, count: 2 }, { lat: 25.6586, lng: -80.3568, count: 7 }, { lat: 33.0975, lng: -80.1753, count: 1 }, { lat: 25.7615, lng: -80.2939, count: 1 }, { lat: 26.3739, lng: -80.1468, count: 1 }, { lat: 37.6454, lng: -84.8171, count: 1 }, { lat: 34.2321, lng: -77.8835, count: 1 }, { lat: 34.6774, lng: -82.928, count: 1 }, { lat: 39.9744, lng: -86.0779, count: 1 }, { lat: 35.6784, lng: -97.4944, count: 2 }, { lat: 33.5547, lng: -84.1872, count: 1 }, { lat: 27.2498, lng: -80.3797, count: 1 }, { lat: 41.4789, lng: -81.6473, count: 1 }, { lat: 41.813, lng: -87.7134, count: 1 }, { lat: 41.8917, lng: -87.9359, count: 1 }, { lat: 35.0911, lng: -89.651, count: 1 }, { lat: 32.6102, lng: -117.03, count: 1 }, { lat: 41.758, lng: -72.7444, count: 1 }, { lat: 39.8062, lng: -86.1407, count: 1 }, { lat: 41.872, lng: -88.1662, count: 1 }, { lat: 34.1404, lng: -81.3369, count: 1 }, { lat: 46.15, lng: -60.1667, count: 1 }, { lat: 36.0679, lng: -86.7194, count: 1 }, { lat: 43.45, lng: -80.5, count: 1 }, { lat: 44.3833, lng: -79.7, count: 1 }, { lat: 45.4167, lng: -75.7, count: 2 }, { lat: 43.75, lng: -79.2, count: 2 }, { lat: 45.2667, lng: -66.0667, count: 3 }, { lat: 42.9833, lng: -81.25, count: 2 }, { lat: 44.25, lng: -79.4667, count: 3 }, { lat: 45.2667, lng: -66.0667, count: 2 }, { lat: 34.3667, lng: -118.478, count: 3 }, { lat: 42.734, lng: -87.8211, count: 1 }, { lat: 39.9738, lng: -86.1765, count: 1 }, { lat: 33.7438, lng: -117.866, count: 1 }, { lat: 37.5741, lng: -122.321, count: 1 }, { lat: 42.2843, lng: -85.2293, count: 1 }, { lat: 34.6574, lng: -92.5295, count: 1 }, { lat: 41.4881, lng: -87.4424, count: 1 }, { lat: 25.72, lng: -80.2707, count: 1 }, { lat: 34.5873, lng: -118.245, count: 1 }, { lat: 35.8278, lng: -78.6421, count: 1 }] };
var baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade', maxZoom: 18 });
var cfg = {
"radius": 4,
"maxOpacity": .6,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map-canvas', {
center: new L.LatLng(25.6586, -80.3568),
zoom: 4,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);
}
}
With the urls in the header, it produces the following heatmap:
Now I want to move the references for leaflet, heatmap and leaflet-heatmap to webpack. In my webpack vendor file, I have added the following urls to my modules to import:
const modulesToImport = [
......
"leaflet",
"leaflet/dist/leaflet.css",
"heatmap.js/build/heatmap.min.js",
"leaflet-heatmap/leaflet-heatmap.js"
];
after which I run webpack --config webpack.config.vendor.js.
I then run the site, click to the Network tab in Chrome, and take a look in the vendor.js file and it now contains the contents of leafletjs, heatmap.min.js and leaflet-heatmap.js. The vendor css file contains the leaflet.css.
But when I run the app, the component crashes on the HeatmapOverlay statement. It says: "ERROR ReferenceError: HeatmapOverlay is not defined"
How can I get the application to recognise and use the HeatmapOverlay object found in the leaflet-heatmap.js file?
Note that if I comment out the Heatmap related lines of code, the map does display, so the leaflet part itself is working.
I ended up adding this to my webpack.config.vendor.js file, in the nonTreeShakableModules section:
"leaflet",
"leaflet/dist/leaflet.css",
"heatmap.js/build/heatmap.min.js",
"leaflet-heatmap/leaflet-heatmap.js",
In my code, I added:
import "heatmap.js";
import "leaflet-heatmap";
declare var HeatmapOverlay: any;
and it worked after that.
I have the following script which uses a drop down index to create a reference to a variable to plot coordinates on a Google map. These are the co-ordinate objects:
var posl0 = { lat: 53.486204, lng: -3.217980 };
var posl1 = { lat: 51.493399, lng: -2.994917 };
var posl2 = { lat: 53.328493, lng: -3.098814 };
var posl3 = { lat: 53.412157, lng: -2.838219 };
var posl4 = { lat: 53.481338, lng: -2.886647 };
var posl5 = { lat: 53.401431, lng: -2.994917 };
var posl6 = { lat: 53.513252, lng: -2.944996 };
var posl7 = { lat: 53.372710, lng: -3.183254 };
var posl8 = { lat: 53.374466, lng: -2.868754 };
This is my script:
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
var pos = 'posl' + mapno;
var pos.toArray();
alert(pos);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}
My issue appears to be with my use of the pos variable as a pointer to the posl object. If I enter the position as position: posl1 all works fine but position: pos does nothing although it alerts the same posl1 ref.
Can anyone help / advise please?
The issue is because your pos value is a string, not a reference to the object held in the posX variable. You could use eval() to fix this, but eval() is incredibly bad practice and should be avoided.
Instead, you can achieve what you need by instead placing all your objects in to an array and then accessing them by index. Something like this:
var pos = [{ lat: 53.486204, lng: -3.217980 },{ lat: 51.493399, lng: -2.994917 },{ lat: 53.328493, lng: -3.098814 },{ lat: 53.412157, lng: -2.838219 },{ lat: 53.481338, lng: -2.886647 },{ lat: 53.401431, lng: -2.994917 },{ lat: 53.513252, lng: -2.944996 },{ lat: 53.372710, lng: -3.183254 },{ lat: 53.374466, lng: -2.868754 }]
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
marker = new google.maps.Marker({
position: pos[mapno],
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}
Also note that your use of jQuery's toArray() is not required (and most likely caused errors) and the locaz array is not used, but I assume this is simply due to redacting parts of your code in the question.
Replace this line
var pos = eval('posl' + mapno);
Try this ;)
The way you are creating array of elements is wrong and the way you are using to access the element from the array is again wrong;
You can add element to array one by one or multiple when you are defining it;
Multiple elements when creating array;
var array = [1, 2, 3, 4, 6, 7];/* in this way you can assign as many elements you want to add to this array array index starts from 0; */
var array = []; /* empty array later you can add elements to it */
array[0] = 1;
array[1] = 2; /* add element to directly at desired index */
array.push(1);
array.push(2);/* add element to array at the end */
So in your case try this
var positions = [{ lat: 53.486204, lng: -3.217980 },
{ lat: 51.493399, lng: -2.994917 },
{ lat: 53.328493, lng: -3.098814 },
{ lat: 53.412157, lng: -2.838219 },
{ lat: 53.481338, lng: -2.886647 },
{ lat: 53.401431, lng: -2.994917 },
{ lat: 53.513252, lng: -2.944996 },
{ lat: 53.372710, lng: -3.183254 },
{ lat: 53.374466, lng: -2.868754 }];
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
var pos = positions[mapno];
alert(pos);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}
I am new to google maps api. I create a maps with hardcore values as markers. But I want to create my markers with the values came from database. Here is my code
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
var markers = [ // Here I set the hard core values for my markers.
{ lat: 22.64201389, lng: 88.43034722, name: "Airport" },
{ lat: 22.60944444, lng: 88.42694444, name: "Baguihati" },
{ lat: 22.53604167, lng: 88.36083333, name: "Ballygunge Phari" },
{ lat: 22.49895833, lng: 88.31902778, name: "Behala" },
{ lat: 22.65743056, lng: 88.36409722, name: "Dakshineshwar" },
{ lat: 22.62013889, lng: 88.39215278 , name: "Dum-Dum Station." },
{ lat: 22.52111111, lng: 88.36479167, name: "Gariahat" },
{ lat: 22.58763889, lng: 88.34027778, name: "Howrah" },
{ lat: 22.59131944, lng: 88.43291667, name: "Karunamayee East" },
{ lat: 22.52131944, lng: 88.38201389, name: "Kasba Bosepukur" },
{ lat: 22.60256944 , lng: 88.40166667 , name: "Lake Town" },
{ lat: 22.68993056, lng: 88.47569444, name: "Madhyam Gram_East" },
{ lat: 22.50875 , lng: 88.33284722 , name: " New Alipur" },
{ lat: 22.54409722 , lng: 88.36743056, name: "Park circus" },
];
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
Please help me to set the database values in the maker.. The values will be comes from servlet.
You can write a PHP (or whatever the language you use) page which contacts with the database and return the details in it as JSON Array.So that you can easily call it via ajax and retrieve the values you need.If you are using servlets GSON library will be useful when converting objects to JSON. However you should have a database table which contains the latitude,longitude and the name.
maybe this code will help you,write this inside doGet() or doPost() in your servlet
Gson gson = new Gson();
java.sql.Connection con = new DBConn().getConnection(); //establish the database connection you use
String getquery = "SELECT * from markers";
ResultSet res = DBHandle.getData(con, getquery);
ArrayList<Marker> markerList;
markerList = new ArrayList<Marker>();
while (res.next()) {
Marker marker=new Marker(); //model class with attributes latitude,longitude and name along with their getters and setters
marker.setLatitude(res.getString("latitude"));
marker.setLongitude(res.getString("longitude"));
marker.setName(res.getString("name"));
markerList.add(marker);
}
String JsonString = gson.toJson(markerList, ArrayList.class);
out.print(JsonString);
And this would help you when retrieving it in javascript.I prefer using jquery for that.
You can try this code to retrieve it via jquery
$.getJSON("url_with_json_here", function(data){
for (var i=0, len=data.length; i < len; i++) {
data[i].latitude;
console.log(data[i].name);
console.log(data[i].longitude);
console.log(data[i].latitude);
}
});