Related
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 want to group all markers near together with the same cluster size using google map.
I tried MarkerClusterer supported by Google Map, but the cluster size are different.
Is there any example for me?
Thanks for your help.
Understanding marker clustering
The MarkerClusterer library uses the grid-based clustering
technique that divides the map into squares of a certain size (the
size changes at each zoom level), and groups the markers into each
square grid. It creates a cluster at a particular marker, and adds
markers that are in its bounds to the cluster. It repeats this process
until all markers are allocated to the closest grid-based marker
clusters based on the map's zoom level. If markers are in the bounds
of more than one existing cluster, the Maps JavaScript API determines
the marker's distance from each cluster, and adds it to the closest
cluster.
You can set a MarkerClusterer option to adjust the cluster
position to reflect the average distance between all the markers that
are contained within it. You can also customize the
MarkerClusterer to modify other parameters like the grid size, the cluster
icon, cluster text, among others.
Take a look at below example:
I have used gridSize parameter to set a grouping value to my markers. This way you can achieve what you're looking for.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 10
});
}
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
},
{
lat: -43.998792,
lng: 170.463352
},
{
lat: -43.999792,
lng: 170.413352
},
{
lat: -43.999000,
lng: 170.463000
}
]
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBplDzEjv3SUmKPKj0IY-Iq4u_nB3z2Q1I&callback=initMap">
</script>
<div id="map"></div>
For an advance example, please take a look at this -> An example of MarkerClusterer v3 and for all examples, click here.
What is the best way to add auto-zoom and auto-center a google cluster maps? Currently the center and zoom is hard-coded with conflicts with dynamically generated markers.
<<div id="map"></div>
<script>
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]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
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: -43.999792, lng: 170.463352}
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Add the marker locations to a google.maps.LatLngBounds object, then call map.fitBounds() on with the resulting bounds.
var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
bounds.extend(location);
map.fitBounds(bounds);
// ...
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
bounds.extend(location);
map.fitBounds(bounds);
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library#07f15d84/markerclustererplus/images/m'
// was 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
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: -43.999792,
lng: 170.463352
}]
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library#07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<div id="map"></div>
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);
}
});