Google Map API V3- MarkerClusterer undefined

Asked 19/6, 2013 at 9:5 Answered 17/7, 2024 at 19:44

javascript google-maps-api-3 markerclusterer

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?

Lodestar answered 19/6, 2013 at 9:5 Comment(4)

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? – Bosomy 19/6, 2013 at 9: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? – Bosomy 19/6, 2013 at 9:51

i found out that i need to download the markerclusterer.js from google library, [google-maps-utility-library-v3.googlecode.com/svn/trunk/… and upload it to server, then just add it to <script src="markerclusterer.js" type="text/javascript"></script> and that shoulh solve the problem. thanks for helping :) – Lodestar 19/6, 2013 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. – Lodestar 19/6, 2013 at 11:58

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>

Lodestar answered 19/6, 2013 at 12:0 Comment(2)

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. – Mentor 18/10, 2017 at 17:27

Link broken, find it here: cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/… , more info on use as cdn here #37181231 – Pisolite 7/10, 2019 at 13:26

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.

Nabokov answered 16/6, 2022 at 13:28 Comment(1)

In the github repo, github.com/googlemaps/…, it says "When adding via unpkg, the MarkerClusterer can be accessed at markerClusterer.MarkerClusterer " – Meletius 2/8, 2024 at 9:57

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

Apostolate answered 9/4, 2015 at 11:7 Comment(0)

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:

Advisory answered 4/8, 2021 at 10:58 Comment(0)

If you are using rails gem 'gmaps4rails' to display and configure maps. You can use the following steps to fix this issue.

rails g gmaps4rails:copy_coffee to copy coffee-script files

Edit app/assets/javascripts/gmaps/google/primitives.coffee file

Replace

clusterer:    MarkerClusterer

With

clusterer:    markerClusterer.MarkerClusterer

You also need to change your

https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js

https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js

Costanza answered 17/7, 2024 at 19:44 Comment(0)

Recommended topics

Hot tags