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);
}
Related
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);
}
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;
});}});
I want to display two map ion same page. The problem is "map-canvas" is displaying properly but map-canvas-2 is not displaying at all. What should I do now Please Help...
Here is my HTML code...
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas"></div>
</div>
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas-2"></div>
</div>
Here is my JAVASCRIPT code
function initialize() {
var myLatLng = new google.maps.LatLng(19.0285, 73.0586);
var myLatLng2 = new google.maps.LatLng(23.344101, 85.309563);
var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var mapOptions2 = {
zoom: 14,
center: myLatLng2,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
Thanks in advance:-)
I'm trying to display google map with markers and circles. The map and the circle is displaying correctly but the marker are not visible on the map.
Please suggest what changes i should make in my code.
<div id="mapview" style="width: 100%; height: 700px;">
</div>
<script>
var map;
var info_window;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918, -0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'), mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918, -0.31237799999996696),
animation: google.maps.Animation.DROP, icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
function addMarkersc() {
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728, 51.5661728), '<p>48, The fairway, wembley, HA..</p>');
}
addMarkersc();
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
}
google.maps.event.addDomListener(window, 'load', initialize);
var image1 = '../Image/salemarker.png';
function createLocationOnMap(titulo, posicao, conteudo) {
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image1,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
</script>
Your marker is out of view. It is at 51.5661728,51.5661728:
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728,51.5661728), '<p>48, The fairway, wembley, HA..</p>');}
Your map is centered at 51.561918,-0.31237799999996696
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
working fiddle
You can try this
function InitializeMap1() {
geocoderMap = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(48.856614, 2.352222);
var myOptions =
{
zoom: 12,
minZoom: 12, // panControl: false, zoomControl: false, scaleControl: false, streetViewControl: true, //
center: latlng,
streetViewControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var arrayMain = [];
var markerLatLng = new google.maps.LatLng(48.856614, 2.352222);
var marker = new google.maps.Marker({
map: map,
position: markerLatLng,
center: markerLatLng
});
arrayMain.push(marker);
}
Try like this:
<div id="mapview" style="width: 100%; height: 700px">
<script>
var map;
var info_window;
function addMarkersc() {
var titulo = '4 bed semi detached For sale';
var posicao = new google.maps.LatLng(51.5661728,51.5661728);
var conteudo = '<p>48, The fairway, wembley, HA..</p>';
var image = '../Image/salemarker.png';
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'),mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918,-0.31237799999996696),
animation: google.maps.Animation.DROP,
icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
addMarkersc();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
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);
}