Home/ Questions/Q 8671485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T18:57:43+00:00

I copied everything from the Google marker clusterer example here and just changed the

  • 0

I copied everything from the Google marker clusterer example here and just changed the data for the points I want to use and the markers won’t show up on my mapp.. any idea why (code below)?

Chrome is giving me one warning

“resource interpreted as Script but transferred with MIME …etc, etc… “…data.json”

However, I printed the data using the document.write(data[i].lat) and such and everything prints fine…

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClusterer v3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }

    </style>

    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="data.json"></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);
      //document.write(data1);
      //var obj = jQuery.getJSON("data.json");
       document.write(data[0].lat);
      //alert( obj.name === "lat" );
    </script>

        <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 2; i++) {
          //var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(data.lat,
              data.lon);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClusterer (5 markers)</h3>
    <p>
      <a href="?compiled">Compiled</a> |
      <a href="?">Standard</a> version of the script.
    </p>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

Here’s the data.json file content…

var data = [{"lat":37.4419,"lon":37.4419}, {"lat":37.4419,"lon":50.36}, {"lat":37.4419,"lon":137.4419}];
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You asked:

    I copied everything from the Google marker clusterer example here and
    just changed the data for the points

    (the title says "everything is an exact copy of the tutorial)

    (it isn’t)

    any idea why?

    Something you changed:

    data.lat and data.lon are undefined.

    You want to use data[i].lat and data[i].lon

    Working example

    • 0