I am trying to work with Google map marker clustering in Javascript. And i am pretty new to this.
The scenario
I am fetching a huge chunk of data from database in the lot of 10000 per call and then rendering the set on google map by sending the lat lng array to the marker cluster.
My data set consists of 100000 outlets. I am fetching 10000 outlets at once and this is being called 10 times so 10 clusters of 10000 are getting created and they are overlapping with each other. When i try to zoom in the cluster expands into further small clusters.
But while zooming out instead of the clustering back they overlap.
Issue- Need to get all the 100000 outlets in one cluster on zoom out .
or if that is not possible then how to fix the overlapping?
This is the code snippet
var mapDiv = document.getElementById('newmap');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(latitude, longitude),
zoom: 3,
panControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function addMarker1(locations, outletname, outletData) {
var infoWindow = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
// this is sending data 10000 each
for (var i = 0; i < outletDataLen; i++) {
outletArray.push(outletData[i]['Outletview']['name']);
j.push({
lat: parseFloat(outletData[i]['Outletview']['latitude']),
lng: parseFloat(outletData[i]['Outletview']['longitude'])
});
outletname.push(outletData[i]['Outletview']['name']);
}
addMarker1(j, outletname, outletData);
Take the markers from the MarkerCluster object and concat new Markers data with it and add it to the same Markerobject as below and also refer the API
var mapDiv = document.getElementById('newmap');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(latitude, longitude),
zoom: 3,
panControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markerCluster = new MarkerClusterer(map, [], {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
function addMarker1(locations, outletname, outletData) {
var infoWindow = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
});
});
var mapmarkers = markerCluster.getTotalMarkers();
markers = markers.concat(mapmarkers);
markerCluster.addMarkers(markers);
markerCluster.redraw();
}
// this is sending data 10000 each
for (var i = 0; i < outletDataLen; i++) {
outletArray.push(outletData[i]['Outletview']['name']);
j.push({
lat: parseFloat(outletData[i]['Outletview']['latitude']),
lng: parseFloat(outletData[i]['Outletview']['longitude'])
});
outletname.push(outletData[i]['Outletview']['name']);
}
addMarker1(j, outletname, outletData);
The solution is to clear the data before looping through the markers
if (markerCluster)
{
markerCluster.clearMarkers();
markerCluster.resetViewport();
markers = [];
markerCluster.removeMarker(new_arr);
}
Related
How to realize clustering of markers on the map? Help me clear errors. necessary scripts are connected. Error: enter image description here
function CustomMarker(latlng, map, imageSrc) {
this.latlng_ = latlng;
this.imageSrc = imageSrc;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
...
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 17,
center: new google.maps.LatLng(48.42216, 44.31308),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var data = [{
profileImage: "./images/1.jpg",
pos: [48.42217, 44.31308]
}, {
profileImage: "./images/2.jpg",
pos: [48.42220, 44.31308]
}];
for(var i=0;i<data.length;i++){
new CustomMarker(new google.maps.LatLng(data[i].pos[0],data[i].pos[1]), map, data[i].profileImage)
}
var markerCluster = new MarkerClusterer(map, data,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
Please find this code snippet might help your cause.
function initialize(markers) {
map = new google.maps.Map(document.getElementById('main-map'), {
zoom:3,
center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
for (var i = 0; i < markers.length; i++) {
var image = '/Festool/media/Festool%20Images/Festool%20Icons/location-icon.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i].Latitude, markers[i].Longitude),
map: map,
icon:image,
title: 'Click to zoom'
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 250,
});
mar.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent( ContentString(i));
infowindow.open(map, marker);
}
})(marker, i));
}
}
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 5 years ago.
Please help me How can I add multiple markers in this code? I searched a lot but I don't know how to add markers in this code? I am new in Google maps API. and sorry if I made any grammatical or spelling mistake in this question.
JS Code:
function initialize() {
var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
$('#user_latitude').val(52.5167);
$('#user_longitude').val(13.3833);
var mapOptions = {
zoom: 3,
center: mapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 3,
scrollwheel: false
};
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
You can define an array inside your initialize function with all your marker:
var locations = [
['Marker 1', 41.0, 12.4],
['Marker 2', 47.0, 15.4],
...
];
First value can be the title, second the latitude and third longitude
Then you can create a loop to add markers
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
Example:
function initialize() {
var locations = [
['Marker 1', 41.0, 12.4],
['Marker 2', 47.0, 15.4],
];
var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
$('#user_latitude').val(52.5167);
$('#user_longitude').val(13.3833);
var mapOptions = {
zoom: 3,
center: mapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 3,
scrollwheel: false
};
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
}
}
references: Simple markers | Google maps api, Adding multiple markers to Google Map
Hi I am trying to set marker icon in Google Map using javascript. My image is in Images.xcassets. Right now I am doing this to set icon. But its not working for me. What I am doing is this:
setMarkerWithIcon('/Images/MapScreen/MapviewIcon/MapviewIcon');
function initialize(latitude, longitude, maxzoom) {
var styles = [{
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var mapOptions = {
zoom: initialZoomLevel,
center: new google.maps.LatLng(latitude + LatLngDeltas[ randomIntFromInterval(0, LatLngDeltas.length) ],
longitude + LatLngDeltas[ randomIntFromInterval(0, LatLngDeltas.length) ] ),
disableDefaultUI: true,
disableDoubleClickZoom: false,
minZoom: initialZoomLevel,
maxZoom: maxzoom,
scrollwheel: false,
scaleControl: false,
rotateControl:true,
rotateControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
google.maps.event.addListener(map, 'click', function(event) {
addMarker(map, event.latLng);
});
}
function addMarker(mapObject, location) {
deleteMarkers();
var marker = new google.maps.Marker({
position: location,
draggable:true,
animation: google.maps.Animation.DROP,
map: mapObject,
icon:markerPath
});
setTimeout(function() {infowindow.open(mapObject,marker);}, 500);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapObject,marker);
});
markers.push(marker);
}
function setMarkerWithIcon(myIcon) {
markerPath = myIcon;
}
Any help is highly appreciated.
I try to make a polyline snap to road from given marker points. My problem is, that the same
code sometimes gives the good results, like in this image
and sometimes a bad result, like this:
Any ideas why this is hapenning? And also, is there a limitation for polyline snap to road?
My map ini code:
var myLatlng = new google.maps.LatLng(47.6557, 23.5833);
var mapOptions = {
zoom: 14,
minZoom: 13,
maxZoom: 19,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
overviewMapControl: false,
streetViewControl: false,
scaleControl: false,
mapTypeControl: false,
panControl: true,
panControlOptions:{
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
}
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
My polyline route snap code:
var polys = new google.maps.Polyline({
map: map,
strokeColor: "#5555FF"
});
myCoord = [
new google.maps.LatLng(47.663383463156144, 23.58100461977301),
new google.maps.LatLng(47.659221287827435, 23.586240291770082),
new google.maps.LatLng(47.65534785438211, 23.576713085349184),
new google.maps.LatLng(47.66020405359421, 23.572249889548402)
];
// BEGIN: Snap to road
var service = new google.maps.DirectionsService(),polys,snap_path=[];
polys.setMap(map);
placeMarker(myCoord[0], map);
for(j=0;j<myCoord.length-1;j++){
service.route({origin: myCoord[j],destination: myCoord[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
polys.setPath(snap_path);
}
});
}
If you just want directions with waypoints, you should just call the directionsService once with those waypoints, something like this (not tested):
var service = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var waypts = [];
for(j=1;j<myCoord.length-1;j++){
waypts.push({location: myCoord[j],
stopover: true});
}
var request = {
origin: myCoord[0],
destination: myCoord[myCoord.length-1],
waypoints: waypts,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
service.route(request,function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else { alert("Directions request failed:" +status); }
});
Note: there is a maximum of 8 waypoints with the free API.
How can I use MarkerClusterer in the Google Maps API? I tried to use it, but it's not working.
My code is written as follow.
function InitializeMap(lat, lng, location, username, town, is_paid) {
var myOptions;
var latlng = new google.maps.LatLng(lat, lng);
if (is_paid != "True") {
myOptions = {
zoom: 10,
center: latlng,
scrollwheel: false,
streetViewControl: false,
//navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
//scaleControl: false,
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else {
myOptions = {
zoom: 10,
center: latlng,
scrollwheel: true,
streetViewControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
var mcOptions = {gridSize: 100, maxZoom: 10};
generateMarkers(location, is_paid);
generateUserMarker(lat, lng, username, town, is_paid);
alert(groupMarkers.length);
var mc = new MarkerClusterer(map, groupMarkers, mcOptions);
//mc.addMarkers(groupMarkers,true);
alert("hello");
}
function generateMarkers(locations, is_paid) {
var marker
for (var i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][0], locations[i][1]), locations[i][2], locations[i][3], is_paid);
}
}
function createMarker(pos, name, town, is_paid) {
var infowindow;
var marker = new google.maps.Marker({
position: pos,
map: map, // google.maps.Map
title: name,
icon: "images/red.png"
});
groupMarkers.push(marker);
}