谷歌地图最大标记

Question

I have a static html website with google map javascript. I wanna add markers to the map but i stuck at 48 marker. After that the markers doesn't show on the map. I think it can be a problem for a maximum character/marker set to google map. Does anyone know is there a maximum marker number? And if yes can i add more markers to the map somehow?

This is my Script so far:

 <script> function initMap() { var center = {lat: 47.47917, lng: 19.1511498}; var mammut = {lat: 47.5083088, lng: 19.026431}; var arena = {lat: 47.4982502, lng: 19.0911343}; var fashion = {lat: 47.497093, lng: 19.0537159}; var andrassy = {lat: 47.5039389, lng: 19.0616061}; var repter = {lat: 47.4384587, lng: 19.2522958}; var krakko = {lat: 50.0834558, lng: 19.9786016}; var tenerife = {lat: 28.05191, lng: -16.71716}; var avenue = {lat: 45.7765006, lng: 15.9788573}; var zagrab = {lat: 45.7693318, lng: 15.9419343}; var marmontova = {lat: 43.5096745, lng: 16.4373208}; var porinova = {lat: 43.51071, lng: 16.4375966}; var osijek = {lat: 45.5474116, lng: 18.6556633}; var annex = {lat: 47.230619, lng: 16.6234876}; var gplusv = {lat: 47.411981, lng: 19.2102934}; var somos = {lat: 47.3761289, lng: 16.7704868}; var mtfoto = {lat: 47.9032641, lng: 20.3778159}; var latszer = {lat: 47.4260691, lng: 19.3832049}; var tran = {lat: 47.5481699, lng: 19.1471997}; var szarka = {lat: 46.7882279, lng: 17.693715}; var focus = {lat: 47.1589625, lng: 20.1953773}; var szeszi = {lat: 46.1908214, lng: 20.0280976}; var kadinsky = {lat: 46.7740667, lng: 17.2528918}; var abert = {lat: 47.2290066, lng: 16.6187043}; var vig = {lat: 47.4946285, lng: 19.0731001}; var diop = {lat: 46.4157422, lng: 20.3254279}; var optik = {lat: 47.09262, lng: 17.9057976}; var corneo = {lat: 48.5005265, lng: 20.9490905}; var cziraki = {lat: 46.8434456, lng: 16.8436873}; var okula = {lat: 47.5500999, lng: 21.5957144}; var matuska = {lat: 46.8234206, lng: 21.0260847}; var midove = {lat: 46.914937, lng: 19.7016352}; var pronay = {lat: 47.8723494, lng: 19.2456849}; var nexum = {lat: 47.877948, lng: 17.2705913}; var lbg = {lat: 46.78489, lng: 17.1869326}; var zsoldos = {lat: 47.388516, lng: 16.5391725}; var feher = {lat: 46.0504518, lng: 18.2777986}; var molnar = {lat: 46.1897054, lng: 18.7225644}; var matok = {lat: 46.3500243, lng: 18.7018789}; var soptik = {lat: 47.3455936, lng: 19.0365583}; var optaki = {lat: 46.4288907, lng: 19.4744863}; var mikli = {lat: 47.0231768, lng: 19.5531984}; var print = {lat: 47.9552898, lng: 22.3243575}; var spar = {lat: 47.4970686, lng: 18.5947423}; var juval = {lat: 47.1778356, lng: 20.1892273}; var tallian = {lat: 46.6543099, lng: 20.2559803}; var stein = {lat: 46.621607, lng: 18.85503}; var dudi = {lat: 46.4937287, lng: 19.7307063}; var boros = {lat: 47.1499906, lng: 18.3868443}; var kurgyis = {lat: 47.490813, lng: 19.3392782}; var bkm = {lat: 47.7575612, lng: 18.5393227}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: center }); var contentarena = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center <br> Aréna Pláza</h6>'+ '<div id="bodyContent">'+ '<h6>1087. BP. Kerepesi út 9.</h6>'+ '</div>'+ '</div>'; var contentmammut = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center <br> Mammut</h6>'+ '<div id="bodyContent">'+ '<h6>Budapest, Lövőház u. 2, 1024</h6>'+ '</div>'+ '</div>'; var contentfashion = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Fashion Street</h6>'+ '<div id="bodyContent">'+ '<h6>1052. BP. Deák Ferenc utca 16-18.</h6>'+ '</div>'+ '</div>'; var contentandrassy = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Andrássy</h6>'+ '<div id="bodyContent">'+ '<h6>1061. BP. Andrássy út 41.</h6>'+ '</div>'+ '</div>'; var contentrepter = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Reptér</h6>'+ '<div id="bodyContent">'+ '<h6>1185. Budapest Nemzetközi Repülőtér</h6>'+ '</div>'+ '</div>'; var contentkrakko = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Galeria Krakowska<br> Sunglass Center</h6>'+ '<div id="bodyContent">'+ '<h6>ul. Pawia 5. 31-154 Kraków</h6>'+ '</div>'+ '</div>'; var contenttenerife = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br> Canarias</h6>'+ '<div id="bodyContent">'+ '<h6>Los Playeros 27. Santa Cruz de Tenerife<br>38650 Arona - Tenerife</h6>'+ '</div>'+ '</div>'; var contentavenue = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fresh Optika<br> Avenue Mall</h6>'+ '<div id="bodyContent">'+ '<h6>Avenija Dubrovnik 16 10020, Zagreb</h6>'+ '</div>'+ '</div>'; var contentzagrab = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Center<br>Arena Centar</h6>'+ '<div id="bodyContent">'+ '<h6>Ulica Vice Vukova 6. 10020, Zagreb</h6>'+ '</div>'+ '</div>'; var contentmarmontova = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fresh Optika<br></h6>'+ '<div id="bodyContent">'+ '<h6>Marmontova ul. 10 21000, Split</h6>'+ '</div>'+ '</div>'; var contentporinova = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Sunglass Centar<br></h6>'+ '<div id="bodyContent">'+ '<h6>Porinova ul. 4 21000, Split</h6>'+ '</div>'+ '</div>'; var contentosijek = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fresh Optika<br>Avenue Mall</h6>'+ '<div id="bodyContent">'+ '<h6>Ulica Sv. Leopolda B. Mandića 50 a 31000, Osijek</h6>'+ '</div>'+ '</div>'; var contentannex = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Annex Optika</h6>'+ '<div id="bodyContent">'+ '<h6>Király u. 8. 9700, Szombathely</h6>'+ '</div>'+ '</div>'; var contentgplusv = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">G plus V Team Kft.</h6>'+ '<div id="bodyContent">'+ '<h6>Alacskai út 24/f. 1/6. 1182, Budapest</h6>'+ '</div>'+ '</div>'; var contentsomos = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Somos Optika Kft.</h6>'+ '<div id="bodyContent">'+ '<h6>Európa út 1. 9737, Bük</h6>'+ '</div>'+ '</div>'; var contentmtfoto = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Fuji Foto Centrum</h6>'+ '<div id="bodyContent">'+ '<h6>Dobó István tér 8. 3300, Eger</h6>'+ '</div>'+ '</div>'; var contentlatszer = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Gyömrő Optikai Szalon</h6>'+ '<div id="bodyContent">'+ '<h6>Simon Mihály tér 5. 2230, Gyömrő</h6>'+ '</div>'+ '</div>'; var contenttran = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">TRAN MTV EURO KFT.</h6>'+ '<div id="bodyContent">'+ '<h6>Szentmihályi út 167-169. 1152, Budapest</h6>'+ '</div>'+ '</div>'; var contentszarka = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Szarka Kovács Imre</h6>'+ '<div id="bodyContent">'+ '<h6>Szent István Tér Vasútállomás. 8638, Balatonlelle</h6>'+ '</div>'+ '</div>'; var contentfocus = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Focus Optika</h6>'+ '<div id="bodyContent">'+ '<h6>Felső Szandai rét 1. 5000, Szolnok</h6>'+ '</div>'+ '</div>'; var contentszeszi = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Szeszi Optika Bt.</h6>'+ '<div id="bodyContent">'+ '<h6>József Attila u. 62. 6758, Röszke</h6>'+ '</div>'+ '</div>'; var contentkadisky = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h6 id="firstHeading" class="firstHeading">Kadinsky Ker. és Szolg. Kft.</h6>'+ '<div id="bodyContent">'+ '<h6>Schwarz Dávid u. 64. 8360, Keszthely</h6>'+ '</div>'+ '</div>'; var infomammut = new google.maps.InfoWindow({ content: contentmammut }); var marker2 = new google.maps.Marker({ position: mammut, map: map, title: 'Mammut' }); marker2.addListener('click', function() { infomammut.open(map, marker2); }); var infofashion = new google.maps.InfoWindow({ content: contentfashion }); var marker3 = new google.maps.Marker({ position: fashion, map: map, title: 'Fashion' }); marker3.addListener('click', function() { infofashion.open(map, marker3); }); var infoandrassy = new google.maps.InfoWindow({ content: contentandrassy }); var marker4 = new google.maps.Marker({ position: andrassy, map: map, title: 'Andrassy' }); marker4.addListener('click', function() { infoandrassy.open(map, marker4); }); var inforepter = new google.maps.InfoWindow({ content: contentrepter }); var marker5 = new google.maps.Marker({ position: repter, map: map, title: 'Repter' }); marker5.addListener('click', function() { inforepter.open(map, marker5); }); var infokrakko = new google.maps.InfoWindow({ content: contentkrakko }); var marker6 = new google.maps.Marker({ position: krakko, map: map, title: 'Krakko' }); marker6.addListener('click', function() { infokrakko.open(map, marker6); }); var infotenerife = new google.maps.InfoWindow({ content: contenttenerife }); var marker7 = new google.maps.Marker({ position: tenerife, map: map, title: 'Tenerife' }); marker7.addListener('click', function() { infotenerife.open(map, marker7); }); var infoavenue = new google.maps.InfoWindow({ content: contentavenue }); var marker8 = new google.maps.Marker({ position: avenue, map: map, title: 'Avenue' }); marker8.addListener('click', function() { infoavenue.open(map, marker8); }); var infozagrab = new google.maps.InfoWindow({ content: contentzagrab }); var marker9 = new google.maps.Marker({ position: zagrab, map: map, title: 'Zagrab' }); marker9.addListener('click', function() { infozagrab.open(map, marker9); }); var infomarmontova = new google.maps.InfoWindow({ content: contentmarmontova }); var marker10 = new google.maps.Marker({ position: marmontova, map: map, title: 'Marmontova' }); marker10.addListener('click', function() { infomarmontova.open(map, marker10); }); var infoporinova = new google.maps.InfoWindow({ content: contentporinova }); var marker11 = new google.maps.Marker({ position: porinova, map: map, title: 'Porinova' }); marker11.addListener('click', function() { infoporinova.open(map, marker11); }); var infoosijek = new google.maps.InfoWindow({ content: contentosijek }); var marker12 = new google.maps.Marker({ position: osijek, map: map, title: 'Osijek' }); marker12.addListener('click', function() { infoosijek.open(map, marker12); }); var infoannex = new google.maps.InfoWindow({ content: contentannex }); var marker13 = new google.maps.Marker({ position: annex, map: map, title: 'Annex' }); marker13.addListener('click', function() { infoannex.open(map, marker13); }); var infogplusv = new google.maps.InfoWindow({ content: contentgplusv }); var marker14 = new google.maps.Marker({ position: gplusv, map: map, title: 'GplusV' }); marker14.addListener('click', function() { infogplusv.open(map, marker14); }); var infosomos = new google.maps.InfoWindow({ content: contentsomos }); var marker15 = new google.maps.Marker({ position: somos, map: map, title: 'Somos' }); marker15.addListener('click', function() { infosomos.open(map, marker15); }); var infomtfoto = new google.maps.InfoWindow({ content: contentmtfoto }); var marker16 = new google.maps.Marker({ position: mtfoto, map: map, title: 'mtfoto' }); marker16.addListener('click', function() { infomtfoto.open(map, marker16); }); var infolatszer = new google.maps.InfoWindow({ content: contentlatszer }); var marker17 = new google.maps.Marker({ position: latszer, map: map, title: 'latszer' }); marker17.addListener('click', function() { infolatszer.open(map, marker17); }); var infotran = new google.maps.InfoWindow({ content: contenttran }); var marker18 = new google.maps.Marker({ position: tran, map: map, title: 'tran' }); marker18.addListener('click', function() { infotran.open(map, marker18); }); var infoszarka = new google.maps.InfoWindow({ content: contentszarka }); var marker19 = new google.maps.Marker({ position: szarka, map: map, title: 'szarka' }); marker19.addListener('click', function() { infoszarka.open(map, marker19); }); var infofocus = new google.maps.InfoWindow({ content: contentfocus }); var marker20 = new google.maps.Marker({ position: focus, map: map, title: 'focus' }); marker20.addListener('click', function() { infofocus.open(map, marker20); }); var infoszeszi = new google.maps.InfoWindow({ content: contentszeszi }); var marker21 = new google.maps.Marker({ position: szeszi, map: map, title: 'szeszi' }); marker21.addListener('click', function() { infoszeszi.open(map, marker21); }); var infokadinsky = new google.maps.InfoWindow({ content: contentkadisky }); } </script>

Thanks.

Answer 1

for user experience, you should not add too many markers on the map, but there are many ways to add a huge number of markers to the map such as

• Grid-based Clustering
• Distance-based Clustering
• Viewport Marker Management
• Fusion Tables
• MarkerClusterer
• MarkerManager

Here ! is an example of how to implement marker cluster in google maps

and you can choose another way by visiting this link

Answer 2

Almost five year late but i'm post a response here for who can experiment some issues with maximum number of markers.

In most cases, i think you don't have a maximum number of markers (I've tried it with approximatly 600 marker and it works just fine). You just experiment a lag when the map displaying markers. The performance issue is the reason why it's not a good practice to add to many marker on the map.

But if you use specific markers with custom icons with .svg for exemple, you can experiment some difficulties. To bypass this problem, you need to disable the optimized rendering property set by default when you build a marker. To do it, just add line "optimized: false" to each of your markers:

var marker = new google.maps.Marker({
   position: myLatlng,
   map: myGmap,
   icon: {url: mySvgIconUrl},
   optimized: false
});

For more infos about it you can look this section of the documentation : https://developers.google.com/maps/documentation/javascript/markers#optimize