All geek questions in one place

Google Map API V3 - MarkerClusterer undefined

I followed the library and youtube manual to add a marker cluster to my map, but I had a problem.

MarkerClusterer undefined

I defined MarkerClusterer as showing in the manual, but still got the above error. below is my code

 <!DOCTYPE html> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemasmicrosoft- com:vml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta charset="UTF-8" /> <title>Ma Page de Google Maps V3</title> <style> html, body, #map_canvas { margin: 3; padding: 3; height: 100%; } </style> <style type="text/css"> .tooltip { background-color:#ffffff; font-weight:bold; border:2px #006699 solid; width:150px} </style> <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="http://www.google.com/jsapi"></script> <script src="../src/data.json" type="text/javascript"></script> <script type="text/javascript"> var script = '<script type="text/javascript" src="../src/markerclusterer'; if (document.location.search.indexOf('compiled') !== -1) { script += '_compiled'; } script += '.js"><' + '/script>'; document.write(script); </script> <script> var trace_markers= []; var markerCluster= null; function Trace_Pin(Lat, Long, immat, type, site, vitesse, date) { var image_trace = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal3/icon61.png', new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 16)); var vehlatlng = new google.maps.LatLng(Lat, Long) ; var trace_marker = new google.maps.Marker({ position: vehlatlng, icon: image_trace }); trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + date + '<br>' + 'Vitesse : ' + vitesse + ' km/h' + '<br>' + '<\/div>'; trace_markers.push(trace_marker); markerCluster = new MarkerClusterer(map, trace_markers); Liste_Points.push(trace_marker.getPosition()); TraceBounds.extend(trace_marker.position); } </script>

Where am I wrong?

+6
source share
2 answers

I found out that I need to download markerclusterer.js from the google library, http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js and upload it to the server, and then just add it and this should fix the problem. thanks for the help:)

replace it

 <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="http://www.google.com/jsapi"></script> <script src="../src/data.json" type="text/javascript"></script> <script type="text/javascript"> var script = '<script type="text/javascript" src="../src/markerclusterer'; if (document.location.search.indexOf('compiled') !== -1) { script += '_compiled'; } script += '.js"><' + '/script>'; document.write(script); </script>

with this

 <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="markerclusterer.js" type="text/javascript"></script>
+17
source

I added a marker cluster plus a gem to my list and it started working!

In the gemfile add this line:

gem 'markerclustererplus-rails' You can enable it by adding the following to your javascript file:

// = markerclusterer required

Link: https://github.com/RogerE/markerclustererplus-rails

+3
source

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

More articles:


All Articles