CODEWITHSUNDEEP
google-maps-api-3markerclusterer
Brady Clive Kendall
Brady Clive Kendall

Reputation: 21

Implementing MarkerClusterer into Google Maps API - no markers showing

I have been trying to implement markerclusterer into my website for the past few weeks and everything I have tried has failed. I have no experience with code at all so everything I've been doing is trial and error.

The website I'm trying to add markerclusterer to is rfmaps.com.au.

I'm unsure as to what I'm doing wrong, and what needs to be fixed and really just need some good advice and help.

Here is the html code that I've been trying to get working. This code is simply all the bits and pieces I've been able to find from forums, all stuck together, and slightly edited (what I could figure out from help from forums)

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      var map;
      var layerl0;
      function initialize() {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(-25, 133),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.HYBRID
        });

        for (var i = 0; i < 1000; ++i) {
          var latLng = new google.maps.LatLng(data.photos[i].latitude,
                                              data.photos[i].longitude)
          var marker = new google.maps.Marker({
            position: latLng,
            draggable: true,
            icon: markerImage
          });
          markers.push(marker);
        }

        var map = new google.maps.Map(document.getElementById("map"), options);
        var mc = new MarkerClusterer(map);

        layerl0 = new google.maps.FusionTablesLayer({
          query: {
            select: "'col2'",
            from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk'
          },
          map: map,
          styleId: 4,
          templateId: 1
        });
      }
      function changeMapl0() {
        var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
        layerl0.setOptions({
          query: {
            select: "'col2'",
            from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk',
            where: "'Location' CONTAINS IGNORING CASE '" + searchString + "'"
          }
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label>Location</label><input type="text" id="search-string-l0">
      <input type="button" onClick="changeMapl0()" value="Search">
    </div>
  </body>
</html>

Upvotes: 2

Views: 838

Answers (1)

sandeep
sandeep

Reputation: 3345

I think you have not added the 'map' object while creating the markers inside the map.

This is your code:

var marker = new google.maps.Marker({
           position: latLng,
           draggable: true,
           icon: markerImage
          });

Please add map: map while generating your markers, like this:

var marker = new google.maps.Marker({
           map: map,
           position: latLng,
           draggable: true,
           icon: markerImage
          });

Regarding marker cluster you need to add this js file- markerclusterer.js

markerCluster = new MarkerClusterer(map, marker);

Upvotes: 2

Related Questions