Google Maps - Mark Clustener

Question

how I configure the line: markerClusterer = new MarkerClusterer(map, markers); On mark clustener, google maps, who is map and markers, give a example Thanks

Sachin Singh · Answer

html, body, #map { height: 100%; margin: 0; padding: 0; } function initMap() { // map options var options = { zoom: 7, center: { lat: 53.3938131, lng: -7.858913 } } var map = new google.maps.Map(document.getElementById('map'), options); // Add a marker clusterer to manage the markers. //Add marker var markers = [ //Dublin { coords: { lat: 53.338741, lng: -6.261563 }, iconImage: 'assets/img/places/stparkdublin.png', content: ' St Stephen’s Green ' + ' ' + ' Learn More ' + ' http://ststephensgreenpark.ie/ ' }, { coords: { lat: 53.3755012, lng: -6.2735677 }, iconImage: 'assets/img/places/botanic garden.png', content: ' Botanic Garden ' + ' ' + ' Learn More ' + ' http://botanicgardens.ie/ ' }, { coords: { lat: 53.355998576, lng: -6.32166538 }, iconImage: 'assets/img/places/stparkdublin.png', ////////////////////add picture content: ' Phoenix Park ' + ' ' + ' Learn More ' + ' http://phoenixpark.ie/ ' }, { coords: { lat: 53.460259, lng: -6.219985 }, iconImage: 'assets/img/places/swordscastle.png', content: ' Swords Castle ' + ' ' + ' Learn More ' + ' https://swordscastle.events/ ' }, { coords: { lat: 53.37923, lng: -6.07201 }, iconImage: 'assets/img/places/Howth.png', content: ' Howth ' + ' ' + ' Learn More ' + ' http://www.visithowth.ie/ ' }, { coords: { lat: 55.1364, lng: -7.456 }, iconImage: 'assets/img/places/buncrana1.png', content: ' Buncrana ' + ' ' + ' Learn More ' + ' https://en.wikipedia.org/wiki/Buncrana ' }, { coords: { lat: 53.152999388, lng: -6.1499994 }, iconImage: 'assets/img/places/sugarloaf_icon.png', content: ' Great sugar loaf ' + ' ' + ' Learn More ' + ' http://visitwicklow.ie/item/the-sugarloaf-trail/ ' }, { coords: { lat: 52.0058, lng: -9.5562 }, iconImage: 'assets/img/places/killarney.png', content: ' Killarney National Park ' + ' ' + ' Learn More ' + ' https://www.killarneynationalpark.ie/ ' }, { coords: { lat: 51.942662896, lng: -9.917162998 }, iconImage: 'assets/img/places/clifs.png', content: ' Ring of Kerry ' + ' ' + ' Learn More ' + ' https://ringofkerrytourism.com/ ' }, { coords: { lat: 52.679, lng: -7.814 }, iconImage: 'assets/img/places/clifs.png', //add picture!!!!!!!!!!!!!!! content: ' Thurles ' + ' ' + ' Learn More ' + ' https://www.tipperary.com/thurles ' }, { coords: { lat: 52.348, lng: -6.517 }, iconImage: 'assets/img/places/wexford museum.png', content: ' Irish National Heritage Park ' + ' ' + ' Learn More ' + ' http://www.irishheritage.ie/ ' }, { coords: { lat: 53.018, lng: -6.398 }, iconImage: 'assets/img/places/wicklow.png', content: ' Wicklow Mountains National Park ' + ' ' + ' Learn More ' + ' https://www.wicklowmountainsnationalpark.ie/ ' }, { coords: { lat: 53.011299, lng: -6.326156 }, iconImage: 'assets/img/places/glendalough.png', content: ' Glendalough ' + ' ' + ' Learn More ' + ' http://www.glendalough.ie/ ' }, { coords: { lat: 53.1876492494, lng: -6.083832998 }, iconImage: 'assets/img/places/Bray.png', content: ' Bray ' + ' ' + ' Learn More ' + ' http://www.bray.ie/ ' }, { coords: { lat: 53.144, lng: -6.072 }, iconImage: 'assets/img/places/greystones.png', content: ' Greystones ' + ' ' + ' Learn More ' + ' http://visitwicklow.ie/item/greystones/ ' }, { coords: { lat: 52.518664592, lng: -7.887329784 }, iconImage: 'assets/img/places/Cashel.png', content: ' Rock of Cashel ' + ' ' + ' Learn More ' + ' https://www.cashel.ie/ ' }, { coords: { lat: 52.6477, lng: -7.2561 }, iconImage: 'assets/img/places/kilkenny.png', content: ' Killenny ' + ' ' + ' Learn More ' + ' https://visitkilkenny.ie/ ' }, //cork { coords: { lat: 51.902694, lng: -8.4767 }, iconImage: 'assets/img/places/butterCork.png', content: ' Museum of Butter ' + ' ' + ' Learn More ' + ' http://thebuttermuseum.com/ ' }, { coords: { lat: 51.89953, lng: -8.499022 }, iconImage: 'assets/img/places/prisoncork.png', content: ' Cork City Gaol ' + ' ' + ' Learn More ' + ' https://corkcitygaol.com/ ' }, { coords: { lat: 53.4513204, lng: -6.140871 }, iconImage: 'assets/img/places/malahideB.png', content: ' Malahide ' + ' ' + ' Learn More ' + ' https://www.malahide.ie/ ' }, { coords: { lat: 53.2839577, lng: -9.0837658 }, iconImage: 'assets/img/places/galway.png', content: ' Galway ' + ' ' + ' Learn More ' + ' https://www.galwaytourism.ie/ ' }, { coords: { lat: 53.470580, lng: -6.122405 }, iconImage: 'assets/img/places/galway.png', content: ' Donabate Beach ' + ' ' + ' Learn More ' + ' https://en.wikipedia.org/wiki/Donabate ' }, { coords: { lat: 52.9713299, lng: -9.4300415 }, iconImage: 'assets/img/places/clifsofmoher.png', content: ' Donabate Beach ' + ' ' + ' Learn More ' + ' https://www.cliffsofmoher.ie/ ' }, { coords: { lat: 51.8960528, lng: -8.4980693 }, iconImage: 'assets/img/places/Cork.png', content: ' Cork ' + ' ' + ' Learn More ' + ' https://purecork.ie/ ' }, { coords: { lat: 53.3667776, lng: -6.5064198 }, iconImage: 'assets/img/places/Leixlip.png', content: ' Leixlip ' + ' ' + ' Learn More ' + ' https://pl.wikipedia.org/wiki/Leixlip ' }, { coords: { lat: 53.1654628, lng: -6.125499 }, iconImage: 'assets/img/places/littlesugarloaf.png', content: ' Little Sugar Loaf ' + ' ' + ' Learn More ' + ' https://www.greystonesguide.ie/little-sugar-loafs-big-day/ ' }, { coords: { lat: 53.5474019, lng: -6.0933048 }, iconImage: 'assets/img/places/rockabill view.png', content: ' Rockabill View ' + ' ' + ' Learn More ' + ' http://www.skerriesseatours.ie/trips.html ' }, { coords: { lat: 52.3337499, lng: -6.4906996 }, iconImage: 'assets/img/places/wexford.png', content: ' Wexford ' + ' ' + ' Learn More ' + ' https://www.visitwexford.ie/ ' }, ]; // Loop through markers var gmarkers = []; for (var i = 0; i follow the above example, you can use the json data (lat/long) from database as well there will be no difference

Naresh Beniwal · Answer

https://developers.google.com/maps/documentation/javascript/marker-clustering

HENRIQUE ITZCOVICI · Answer

Thank you !