Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Question Google Maps V3 - "MarkerClusterer is undefined"

    Hello!

    I'm currently working with a googlemaps (version 3) on a new site we're constructing and we're looking at attempting to implement the MarkerClusterer feature.

    I've dug through the google documentation as well as a multitude of stackoverflow and independent blog posts about how to implement the MarkerClusterer however I'm still not understanding how to implement it properly.

    Javascript (simplified)
    Code:
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.tools.min.js"></script>
    
    <script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=false" type="text/javascript"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
    
    
    <script type="text/javascript">
        var locations = [
    
        ['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
        ['This is simply a testThis is the info', 41.252615, -96.1338, 2]
        ];
    	var mapOptions = {
    	zoom: 10,
    	center: new google.maps.LatLng(41.22,-95.95),
    	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
    	
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i)); 
    	  
        }
      </script>
    Yes the map is working, yes the points are working, yes the infobubbles are pulling through. However I'm getting the error of "MapClusterer is undefined" despite having called the MarkerClusterer.js file which explicitly creates the function named "MarkerClusterer".

    any help on this would rock and I'm sure if anyone else has this problem it'd be a relief to find a solution

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I don't get that error with the code provided, but then I don't see any attempt to use the marker clusterer in the code you have posted either.

    I think you might need to post some code that is not quite so simplified, or maybe a link to your actual map

  • Users who have thanked xelawho for this post:

    dylanbaumannn (11-05-2012)

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Sorry about that, I have updated the markerCluster in this version. There was a submission right before I copied the snippet of code and did not realize that it didn't include the MarkerClusterer.

    Still the same errors are coming through, MarkerClusterer is undefined despite the fact that the js is included and defines the markerclusterer


    Quote Originally Posted by xelawho View Post
    I don't get that error with the code provided, but then I don't see any attempt to use the marker clusterer in the code you have posted either.

    I think you might need to post some code that is not quite so simplified, or maybe a link to your actual map
    Code:
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.tools.min.js"></script>
    
    <script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=false" type="text/javascript"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
    
    
    <script type="text/javascript">
        var locations = [
    
        ['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
        ['This is simply a testThis is the info', 41.252615, -96.1338, 2]
        ];
    	var mapOptions = {
    	zoom: 10,
    	center: new google.maps.LatLng(41.22,-95.95),
    	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
    	
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i)); 
    	var markerCluster = new MarkerClusterer(map, markers);  
        }
      </script>

    Here is the updated snippet with the marker clusterer is defined with the error coming through properly

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    There are a couple of problems here. The error you are getting is because you are not declaring the script type correctly. This line:
    Code:
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
    should be this:
    Code:
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
    The next thing is that the second argument of the markerclusterer is supposed to be an array of markers, but you are passing it a variable "markers" which you have not defined. what you would want to do is create an empty array, push your markers onto it, then pass that array (outside of the marker creation loop) to the clusterer. Something like this, I am guessing:

    Code:
    <script type="text/javascript">
    var markers=[];
        var locations = [
    
        ['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
        ['This is simply a testThis is the info', 41.252615, -96.1338, 2]
        ];
    	var mapOptions = {
    	zoom: 10,
    	center: new google.maps.LatLng(41.22,-95.95),
    	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
    	
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i)); 
    	markers.push(marker)
        }
    	var markerCluster = new MarkerClusterer(map, markers);  
      </script>

  • Users who have thanked xelawho for this post:

    dylanbaumannn (11-06-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Ummm...Xelawho, the two <script> tags that you posted are IDENTICAL.

    Here they are, both in a single block:
    Code:
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
    And here is his (red) compared to yours (blue):
    Code:
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
    What are you seeing that my blind eyes don't see?
    Last edited by Old Pedant; 11-05-2012 at 11:44 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Code:
    ... type="type/javascript">
    vs.
    Code:
    ... type="text/javascript">

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    LOL! I was looking at the URL and flat out missed that. Yes, I do need new eyes. Or maybe a new brain.

    "Igor! Where are you? I need you to make a withdrawal down at the brain bank."
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Smile Thank youuuuuu

    Quote Originally Posted by xelawho View Post
    Code:
    <script type="text/javascript">
    var markers=[];
        var locations = [
    
        ['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
        ['This is simply a testThis is the info', 41.252615, -96.1338, 2]
        ];
    	var mapOptions = {
    	zoom: 10,
    	center: new google.maps.LatLng(41.22,-95.95),
    	mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
    	
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i)); 
    	markers.push(marker)
        }
    	var markerCluster = new MarkerClusterer(map, markers);  
      </script>

    Thank you for this! I was having the hardest time trying to decipher through the google documentation trying to figure out how they were passing variables but this makes a lot more sense now that I see it in use.

    Also, thanks for the catch on the javascript type/text. Long day and I completely looked past it


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •