Google Map API V3- MarkerClusterer undefined

Question

I followed the library and youtube guide to add marker clusterer to my map but I got the problem.

MarkerClusterer undefined

I have defined MarkerClusterer as show in the guide, 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 did I did wrong?

are you sure your markerclusterer.js / markerclusterer_compiled.js file is being called in correctly? Do you need to do anything to initialise it before trying to reference the MarkerClusterer class? — duncan, Jun 19 '13 at 09:50
Also, where are you calling the Trace_Pin function from? That's not apparent from this code - do you need to perhaps adjust that to wait for the markercluster JS file to load in before trying to call that function? — duncan, Jun 19 '13 at 09:51
i found out that i need to download the markerclusterer.js from google library, [http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js and upload it to server, then just add it to `` and that shoulh solve the problem. thanks for helping :) — dswong, Jun 19 '13 at 11:56
about the compiled, i copied from an example, my bad. Trace_Pin is a function that I call when I click on a button in my program. — dswong, Jun 19 '13 at 11:58

score 19 · Answer 1 · answered Jun 19 '13 at 12:00

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

replace this

<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>

This fixed it, but can someone explain the asynchronous issue behind loading this script? Because sometimes upon refreshing it won't work, but refreshing the cache will always work. — Serey, Oct 18 '17 at 17:27
Link broken, find it here: https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js , more info on use as cdn here https://stackoverflow.com/questions/37180731/what-is-the-alternate-source-path-for-google-markerclusterer-js-library — Fanky, Oct 07 '19 at 13:26

score 8 · Answer 2 · answered Jun 16 '22 at 13:28

I solved this using two steps as mentioned in the docs.

Add cdn link <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
Change from new MarkerClusterer({ markers, map }); to new markerClusterer.MarkerClusterer({ markers, map });

I hope it will help someone as it is not mentioned in the google's documentation.

score 3 · Answer 3 · answered Apr 09 '15 at 11:07

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

In your Gemfile, add this line:

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

//= require markerclusterer

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

Efrain Gonzalez · Answer 4 · 2023-02-15T04:43:06.890

1

Inshal was right. Google doc needs an update. This works

Add cdn link script https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js

Change from new MarkerClusterer({ markers, map }); to new markerClusterer.MarkerClusterer({ markers, map });

edited Feb 15 '23 at 04:43

answered Feb 15 '23 at 04:41

Efrain Gonzalez

11
3

use comment instead of posting it as answer – Viresh Mathad Feb 18 '23 at 09:56

score 0 · Answer 5 · answered Aug 04 '21 at 10:58

The issue in my case was that the script was blocked because of CSP.

I use helmet to specify what URLs can be accessed via my website.

I just added 'https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js' to the list of scriptSrc and it worked.

From the docs:

score 0 · Answer 6 · answered Jul 22 '22 at 13:11

For me the issue appears to be that the initial Google documentation (which didn't work for me) is not the same as the examples later (which do work correctly).

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

Sample JS: new MarkerClusterer({ markers, map });

Scroll to here: https://developers.google.com/maps/documentation/javascript/marker-clustering#adding-a-marker-clusterer

And the CDN example gives this: const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });

I'm not sure how their JS fiddle (https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/marker-clustering/jsfiddle) seems to work, but for me using the markerClusterer.MarkerClusterer() did the trick.

Google Map API V3- MarkerClusterer undefined

6 Answers6