Develop Reference

Google Map Marker Clustering not Working on zoom out

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);
}

Why can I not have more than 1-2 google maps on my website?

I am currently creating a draft page of a restaurants (locations) html file.
I was hoping to have a google maps window for each destination however, when attempting to load more than 2 some of them refuse to show, and others only work after refreshing the page a few times and seems to be quite erratic.
Code for each:
HTML
<!-----------------MAP FOR ST.KILDA ------------------>
<div id="map"></div>
<script>
function initMap() {
var stkilda = {lat: -37.866868, lng: 144.9753293};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: stkilda
});
var marker = new google.maps.Marker({
position: stkilda,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZNx6dX2APjYUz5jzCXzsFuqS4O7s-v38&callback=initMap">
</script>
<!----------------- END OF MAPS --------------------->
<!-----------------MAP FOR collingwood ------------------>
<div id="mapp"></div>
<script>
function initMap() {
var collingwood = {lat: -37.8179145, lng: 104.9973313};
var mapp = new google.maps.Map(document.getElementById('mapp'), {
zoom: 15,
center: collingwood
});
var markerr = new google.maps.Marker({
position: collingwood,
map: mapp
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZNx6dX2APjYUz5jzCXzsFuqS4O7s-v38&callback=initMap">
</script>
<!----------------- END OF MAPS --------------------->
<!-----------------MAP FOR MELBOURNE ------------------>
<div id="mappp"></div>
<script>
function initMap() {
var melbourne = {lat: -37.8179145, lng: 144.9973313};
var mappp = new google.maps.Map(document.getElementById('mappp'), {
zoom: 15,
center: melbourne
});
var markerrr = new google.maps.Marker({
position: melbourne,
map: mappp
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZNx6dX2APjYUz5jzCXzsFuqS4O7s-v38&callback=initMap">
</script>
<!----------------- END OF MAPS --------------------->

Here is an example i used for generating 3 maps on a single page
Apologies for formatting.
({
loadMap: function() {
var styles;
styles = [
{
featureType: "all",
stylers: [
{
saturation: -92
}, {
hue: "#2A00FF"
}, {
visibility: "simplified"
}, {
gamma: 2
}
]
}
];
return $.getScript("https://maps.googleapis.com/maps/api/js?key=APIKEY", function() {
var mapCanvas1, mapCanvas2, mapCanvas3, mapOptions1, mapOptions2, mapOptions3;
mapCanvas1 = document.getElementById('map1');
mapCanvas2 = document.getElementById('map2');
mapCanvas3 = document.getElementById('map3');
mapOptions1 = {
center: new google.maps.LatLng(x, y),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
styles: styles,
draggable: isDraggable
};
mapOptions2 = {
center: new google.maps.LatLng(x, y),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
styles: styles,
draggable: isDraggable
};
mapOptions3 = {
center: new google.maps.LatLng(x, y),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
styles: styles,
draggable: isDraggable
};
this.map1 = new google.maps.Map(mapCanvas1, mapOptions1);
this.map2 = new google.maps.Map(mapCanvas2, mapOptions2);
this.map3 = new google.maps.Map(mapCanvas3, mapOptions3);
googleMap.map1 = this.map1;
googleMap.map2 = this.map2;
return googleMap.map3 = this.map3;
});}});

Googlemaps API - Greyscale

I have the following code setup to apply a map for a variety of areas
var locations = [
['Liver Office - Liverpool Office', 53.40529, -2.988801, 1],
['Lond office - London Office', 51.515026, -0.086811, 2],
];
function plotMap(loc) {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2])),
stylers: [
{ saturation: -100 } // <-- THIS
]
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
},
icon: 'marketICO.png',
title: (locations[loc][0])
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infowindow.setContent(locations[loc][0]);
infowindow.open(map, marker);
}
})(marker, loc));
}
$('.livLink').click(function(){
plotMap(0);
});
$('.lonLink').click(function(){
plotMap(1);
});
plotMap(0);
Has anyone managed to get their map greyscale - i've had a few attempts - including above - but no luck so far..

You are not applying the styles correctly.
var styles = [{
"stylers": [{
"saturation": -100
}]
}];
var mapOptions = {
zoom: 17,
styles: styles,
// your other options here
};
Or directly in the map options:
var mapOptions = {
zoom: 17,
styles: [{
"stylers": [{
"saturation": -100
}]
}],
// your other options here
};
Check this nice tool: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Place Google Map Marker icon using javascript taking images from Image asset in iOS

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.

How to make Google Maps V3 polyline snap to road from given points?

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.