All geek questions in one place

Marker Restrictions

Hi, this is my first post here.

I played with Google maps trying to make a list of campsites in France.

I have a point of reading an XML data file Loading a map and grouping the results, and it all works , but very slowly.

Q1 Is there a limit on the number of tokens that you can display even with a cluster (currently> 7000 entries exist)

Q2 Is there something clearly wrong in the code that I still have:

<!DOCTYPE html> <html> <head> <title>Read XML in Microsoft Browsers</title> <script src="http://maps.google.com/maps/api/js?sensor=false&language=en&region=GB" type="text/javascript"></script> <script src="scripts/markerclusterer.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="stylesheets/style_1024.css" /> <script type="text/javascript"> var xmlDoc; function loadxml() { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.onreadystatechange = readXML; xmlDoc.load("xml_files/France_all.xml"); } function readXML() { if (xmlDoc.readyState == 4) { //alert("Loaded"); //set up map var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(0, 0), mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }); var bounds = new google.maps.LatLngBounds(); var infowindow = new google.maps.InfoWindow({ maxWidth: 100 }); var marker, i var markers = []; var html = []; var x = (xmlDoc.getElementsByTagName("placemark").length); //for (i = 0; i < x; i++) { for (i = 0; i < x; i++) { //document.write(xmlDoc.documentElement.childNodes[1].firstChild.tagName) + '<br>'; desc = xmlDoc.getElementsByTagName("description")[i].text; lat = parseFloat((xmlDoc.getElementsByTagName("latitude")[i].text)); lon = parseFloat((xmlDoc.getElementsByTagName("longitude")[i].text)); myicon = (xmlDoc.getElementsByTagName("icon")[i].text); //create new point var point = new google.maps.LatLng(lat, lon); //create new marker marker = new google.maps.Marker({ position: point, panControl: false, map: map, icon: myicon }); //increae map bounds bounds.extend(point); //fit to bounds map.fitBounds(bounds); //add reference to arrays markers.push(marker); html.push(desc); //add listener google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(html[i]); infowindow.open(map, marker); } })(marker, i)); //alert(i + " " + desc +" added!"); }; //var mc = new MarkerClusterer(map); var mcOptions = {gridSize: 50, maxZoom: 15 }; var mc = new MarkerClusterer(map, markers, mcOptions); } } </script> </head> <body onload="loadxml()"> <div style="height:100%; width:100%"> <div id="map" style="float:left; width:50%; height:100%"> <!--filled via script--> </div> <div style="float:left; width:50%; height:100%"> <h4>Select Region</h4> <select> <option value="Alsace" onclick="loadxml()">Alsace</option> </select> </div> </div> </body> </html>
+4
source share
1 answer

This article may help. A tile-based solution (FusionTables, KmlLayer, or a custom server-based map) will run faster than Google Maps API v3 native objects, even with clustering. You can see the time of transfer and processing of the xml file.

0
source

Source: https://habr.com/ru/post/1437616/

More articles:


All Articles