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

Google map (mapTypeControlOptions) is not working

I would like to position my satellite button to the center of the map but however is not working. Would appreciate if anyone can assist here. thanks.
function initialize() {
$(q).addClass('fmp_responsive_map');
startMap(true);
var mapProp = {
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
$('input[type="submit"], button[type="submit"]', $(y.searchForm))
.on('click', function(a) {
a.preventDefault();
var b = $(y.searchForm).attr("action");
searchData(b)
})
}

Tried the working sample found here, and made changes to the following code.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: -28.643387, lng: 153.612224},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.CENTER
},
...
That's it. Try using CENTER.

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {array}

This is the script I'm using.
<script>
var user_lat, user_lng;
var map;
var url = "./rest/network";
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17,
lng: 80
},
zoom: 5
});
$.post(url,function(data,successStatus){
$.each(data, function(index, value) {
new google.maps.Marker({
position: value,
draggable: false,
map: map,
title: "cab"
});
});
});
}
</script>
The url returns [{lat:12.74711089,lng:79.98483278},{lat:18.0,lng:80.0},{lat:19.0,lng:78.0}]
Again when I use this code its working
<script>
var user_lat, user_lng;
var map;
var url = "./rest/network";
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17,
lng: 80
},
zoom: 5
});
var data = [{lat:12.74711089,lng:79.98483278},
{lat:18.0,lng:80.0},
{lat:19.0,lng:78.0}];
$.each(data, function(index, value) {
new google.maps.Marker({
position: value,
draggable: false,
map: map,
title: "cab"
});
});
}
</script>
If the array format is the problem, then the second code also shouldn't work. But it is working. I'm not knowing the reason behind the problem. Is there any problem with the ajax call?

How To Make a Map Center on User's Location

How do I make a map center on the client's current location, but default to the LatLng below if the current location can't be determined.
var myOptions = {
center: new google.maps.LatLng(12.659493, 79.415412),
zoom: 12,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

You can use the HTML 5 Geolocation functions for this purpose. It's close but not super precise.
Demo
var map;
function initialize() {
if(navigator.geolocation) {
success = function(position) {
createMap(position.coords.latitude, position.coords.longitude);
};
error = function() { createMap(12.659493, 79.415412); }
navigator.geolocation.getCurrentPosition(success, error);
}
else {
createMap(12.659493, 79.415412);
}
}
function createMap(lat, lng) {
var mapOptions = { center: new google.maps.LatLng(lat, lng),
zoom: 12,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}