I struggle with JSON and jQuery so I’m hoping to get some help figuring out what I’m doing wrong. I am attempting to plot a series of markers using the Google Map API, feeding it JSON data, and clustering the markers. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cluster Map</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
<style>
body{
padding:0;
margin:0;
font: .8em Verdana, Arial, Tahoma, sans-serif;
}
#map{
height:750px;
width:100%;
}
#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: 98%;
}
.map-compact{
max-width:700px;
max-height:500px;
border: 2px solid #ccc;
}
.map-container-compact{
max-width:705px;
}
</style>
<script type="text/javascript">
var map;
var markers = [];
var infowindow = new google.maps.InfoWindow();
var locations = [
[1176,47.7771162,-116.7955848],
[1179,43.611205,-116.206492],
[1180,43.6468282,-116.266549],
[1184,42.859824,-112.443284],
[1185,43.5956343,-114.3457667],
[1187,42.944591,-115.311806],
[1190,45.1752265,-113.8929893],
[1194,43.5221362,-114.3172418],
[1195,43.644232,-116.26701],
[1196,47.7121524,-116.8032732],
[1199,43.558423,-116.769645],
[1204,43.4664344,-116.6676954],
[1209,43.622482,-116.226826],
[1212,47.6744292,-116.7838873],
[1224,47.7032104,-116.7834193],
[1225,46.4176913,-116.9870599],
[1232,43.6872404,-114.3682851],
[1237,43.6851259,-114.3669669],
[1240,43.6421036,-116.2081372],
[1243,47.7187013,-116.8942952],
[1253,42.965614,-115.443908],
[1261,43.625014,-116.246915],
[1268,43.596615,-116.718836],
[1271,47.701837,-116.834145],
[1280,47.655409,-117.015739],
[1283,47.712077,-116.799549],
[1290,43.647386,-116.224156],
[1295,44.9089252,-116.0975693],
[1297,43.5997326,-111.1112745],
[1298,43.578648,-116.78627],
[1299,46.4265572,-117.0083975],
[1302,43.632576,-116.275534],
[1314,43.6176412,-116.2141481],
[1322,48.2954435,-116.5473894],
[1323,42.7127802,-114.8553122],
[1324,42.5874904,-114.8099088],
[1325,43.671069,-116.402881],
[1327,42.351836,-114.301682],
[1328,44.5049268,-114.2355923],
[1329,44.7292708,-116.4377118],
[1330,42.8588884,-112.447434],
[1331,44.0751148,-116.9350504],
[1332,43.579099,-116.558992],
[1333,43.647544,-116.27344],
[1334,42.5763726,-114.4602915],
[1335,44.0644155,-116.9293831],
[1336,44.4930619,-116.01261],
[1337,42.5561028,-114.4682842],
[1338,44.2466996,-116.9581766],
[1339,42.5708601,-113.7339578],
[1340,43.6163922,-116.2027668],
[1342,43.5866989,-116.5393165],
[1343,42.7727802,-114.7040982],
[1344,42.537814,-113.794064],
[1345,43.6675249,-116.6816121],
[1346,43.675614,-116.912361],
[1347,43.686977,-114.371952],
[1348,42.7242128,-114.5199076],
[1355,43.616294,-116.2026919],
[1357,44.0754797,-116.9348668],
[1358,43.58822,-116.793204],
[1359,42.564691,-114.604884],
[1360,43.6697562,-116.6986001],
[1361,43.4644302,-114.2617445],
[1364,43.620536,-116.232213],
[1365,43.6809347,-114.3644168],
[1366,42.864466,-112.444164],
[1367,42.9310678,-114.4096664],
[1368,42.406315,-113.5783814],
[1369,43.5776876,-116.193464],
[1370,46.4875605,-115.7989265],
[1371,42.894036,-112.441027],
[1373,37.8551833,-96.8499825],
[1374,43.621254,-116.285467],
[1375,46.7326183,-117.0246528],
[1376,43.596208,-116.390291],
[1377,43.593472,-116.587311],
[1378,43.608995,-116.197508],
[1379,43.9002355,-116.20344],
[1381,43.9746177,-116.90268],
[1382,43.6805409,-114.3640766],
[1383,43.607763,-116.603533],
[1384,43.498837,-112.001354],
[1385,42.5898024,-114.4601416],
[1386,42.0130058,-111.8015388],
[1387,43.5900814,-116.2671316],
[1388,44.7259041,-116.4394012],
[1389,42.5631093,-114.4388847],
[1390,43.6338961,-116.2709102],
[1392,43.634165,-116.646771],
[1393,43.8734348,-116.5000284],
[1394,42.6156871,-113.6720916],
[1397,43.9661111,-111.6844444],
[1398,43.5983945,-116.2136108],
[1399,43.5111207,-112.0161224],
[1400,46.7330816,-117.0148976],
[1401,42.548872,-114.450706],
[1402,42.537649,-113.780903],
[1403,43.6000219,-116.1933486],
[1405,42.0941018,-111.876875],
[1406,45.753452,-116.315653],
[1407,43.6918859,-116.489992],
[1408,46.4237243,-117.0009021],
[1409,43.5900634,-116.2658883],
[1410,44.7311353,-116.1028401],
[1411,43.588323,-116.529529],
[1412,43.669416,-116.67992],
[1413,43.8376004,-111.7781019],
[1414,43.2198791,-112.3421011],
[1415,42.8254335,-114.4335266],
[1416,44.5147255,-111.2996359],
[1417,43.630866,-116.202995],
[1418,43.9037116,-116.9243264],
[1419,42.550021,-114.478571],
[1420,43.5760239,-116.274629],
[1421,42.7241673,-114.5288892],
[1422,43.9132029,-113.6144736],
[1423,43.467522,-112.003148],
[1424,43.6918329,-116.4645991],
[1425,43.6022386,-116.2371153],
[1426,42.854228,-112.442169],
[1428,42.9458958,-112.4665155],
[1429,42.9250836,-114.9684632],
[1430,43.566832,-116.5641797],
[1432,43.679547,-111.906763],
[1433,43.612178,-116.39125],
[1434,43.691227,-116.334667],
[1436,43.48318,-112.056229],
[1437,43.604975,-116.397312],
[1438,43.6217852,-116.2186593],
[1439,43.5930729,-116.193949],
[1442,43.6043259,-116.2434629],
[1443,46.3897613,-116.9890981],
[1444,43.6664249,-116.692909],
[1446,43.5642228,-116.5728247],
[1449,43.633387,-116.253689],
[1450,42.2298678,-111.2634005],
[1451,43.1877135,-112.3446804],
[1452,48.2402072,-116.8935579],
[1453,43.8252487,-111.7895072],
[1454,42.7241217,-114.5242275],
[1455,48.2760802,-116.551992],
[1456,43.5961209,-116.193083],
[1457,42.8649244,-112.4459673],
[1458,43.1919721,-112.3414596],
[1459,43.6647663,-116.6905536],
[1461,43.6516862,-116.6712311],
[1462,43.579161,-116.172769],
[1463,43.6496695,-116.2797695],
[1464,43.6830057,-114.3643388],
[1467,42.7231549,-114.5174375],
[1468,46.4078053,-117.021797],
[1469,44.9105972,-116.1009361],
[1470,43.5653015,-116.5729968],
[1471,43.616768,-116.930722],
[1473,42.542717,-113.7932431],
[1474,42.6684043,-113.6011401],
[1475,42.544867,-113.793648],
[1476,42.537811,-113.79627],
[1479,43.4885245,-116.4057607],
[1480,43.611487,-116.5932059],
[1481,42.526298,-113.792321],
[1482,43.583243,-116.556939],
[1484,43.6145361,-116.2013916],
[1485,42.5780886,-114.4603468],
[1486,43.6680225,-116.6810506],
[1487,46.1403174,-115.9788537],
[1488,43.1311579,-115.692717],
[1489,46.3777343,-116.9719947],
[1490,43.6462179,-116.95169],
[1492,46.7335277,-117.0013502],
[1494,43.687671,-116.35495],
[1495,48.274166,-116.5477179],
[1497,43.5792901,-116.5594101],
[1498,45.9268143,-116.128407],
[1499,42.5336322,-114.364631],
[1501,43.5902492,-116.3128768],
[1502,46.7376573,-117.0015188]
];
function initialize() {
geocoder = new google.maps.Geocoder();
var center = new google.maps.LatLng(43.474144,-112.03866);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
markMultiple();
}
function markMultiple(){
//$.getJSON('test.json', function(data) {
// $.each(data, function() {
// var latLng = new google.maps.LatLng(data.lat,data.lng);
// var content = data.id + ':' + data.lat + ',' + data.lng;
// markMap(latLng, content);
// });
//});
for (var i = 0; i < locations.length; i++) {
var loc = locations[i];
var latLng = new google.maps.LatLng(loc[1],loc[2]);
var content = loc[0] + ":" + loc[1] + "," + loc[2];
markMap(latLng, content);
}
var markerCluster = new MarkerClusterer(map, markers);
}
function markMap(position, content){
var marker = new google.maps.Marker({
position: position
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-container">
<div id="map"></div>
</div>
</body>
</html>
When I use a local array, it works fine. What I’m trying to get working is the commented code. The json file is in the same directory as my page. I’ve validated my json using jsonlint.com.
Here is the JSON:
[{"id":1176,"lat":47.7771162,"lng":-116.7955848},{"id":1179,"lat":43.611205,"lng":-116.206492},{"id":1180,"lat":43.6468282,"lng":-116.266549},{"id":1184,"lat":42.859824,"lng":-112.443284},{"id":1185,"lat":43.5956343,"lng":-114.3457667},{"id":1187,"lat":42.944591,"lng":-115.311806},{"id":1190,"lat":45.1752265,"lng":-113.8929893},{"id":1194,"lat":43.5221362,"lng":-114.3172418},{"id":1195,"lat":43.644232,"lng":-116.26701},{"id":1196,"lat":47.7121524,"lng":-116.8032732},{"id":1199,"lat":43.558423,"lng":-116.769645},{"id":1204,"lat":43.4664344,"lng":-116.6676954},{"id":1209,"lat":43.622482,"lng":-116.226826},{"id":1212,"lat":47.6744292,"lng":-116.7838873},{"id":1224,"lat":47.7032104,"lng":-116.7834193},{"id":1225,"lat":46.4176913,"lng":-116.9870599},{"id":1232,"lat":43.6872404,"lng":-114.3682851},{"id":1237,"lat":43.6851259,"lng":-114.3669669},{"id":1240,"lat":43.6421036,"lng":-116.2081372},{"id":1243,"lat":47.7187013,"lng":-116.8942952},{"id":1253,"lat":42.965614,"lng":-115.443908},{"id":1261,"lat":43.625014,"lng":-116.246915},{"id":1268,"lat":43.596615,"lng":-116.718836},{"id":1271,"lat":47.701837,"lng":-116.834145},{"id":1280,"lat":47.655409,"lng":-117.015739},{"id":1283,"lat":47.712077,"lng":-116.799549},{"id":1290,"lat":43.647386,"lng":-116.224156},{"id":1295,"lat":44.9089252,"lng":-116.0975693},{"id":1297,"lat":43.5997326,"lng":-111.1112745},{"id":1298,"lat":43.578648,"lng":-116.78627},{"id":1299,"lat":46.4265572,"lng":-117.0083975},{"id":1302,"lat":43.632576,"lng":-116.275534},{"id":1314,"lat":43.6176412,"lng":-116.2141481},{"id":1322,"lat":48.2954435,"lng":-116.5473894},{"id":1323,"lat":42.7127802,"lng":-114.8553122},{"id":1324,"lat":42.5874904,"lng":-114.8099088},{"id":1325,"lat":43.671069,"lng":-116.402881},{"id":1327,"lat":42.351836,"lng":-114.301682},{"id":1328,"lat":44.5049268,"lng":-114.2355923},{"id":1329,"lat":44.7292708,"lng":-116.4377118},{"id":1330,"lat":42.8588884,"lng":-112.447434},{"id":1331,"lat":44.0751148,"lng":-116.9350504},{"id":1332,"lat":43.579099,"lng":-116.558992},{"id":1333,"lat":43.647544,"lng":-116.27344},{"id":1334,"lat":42.5763726,"lng":-114.4602915},{"id":1335,"lat":44.0644155,"lng":-116.9293831},{"id":1336,"lat":44.4930619,"lng":-116.01261},{"id":1337,"lat":42.5561028,"lng":-114.4682842},{"id":1338,"lat":44.2466996,"lng":-116.9581766},{"id":1339,"lat":42.5708601,"lng":-113.7339578},{"id":1340,"lat":43.6163922,"lng":-116.2027668},{"id":1342,"lat":43.5866989,"lng":-116.5393165},{"id":1343,"lat":42.7727802,"lng":-114.7040982},{"id":1344,"lat":42.537814,"lng":-113.794064},{"id":1345,"lat":43.6675249,"lng":-116.6816121},{"id":1346,"lat":43.675614,"lng":-116.912361},{"id":1347,"lat":43.686977,"lng":-114.371952},{"id":1348,"lat":42.7242128,"lng":-114.5199076},{"id":1355,"lat":43.616294,"lng":-116.2026919},{"id":1357,"lat":44.0754797,"lng":-116.9348668},{"id":1358,"lat":43.58822,"lng":-116.793204},{"id":1359,"lat":42.564691,"lng":-114.604884},{"id":1360,"lat":43.6697562,"lng":-116.6986001},{"id":1361,"lat":43.4644302,"lng":-114.2617445},{"id":1364,"lat":43.620536,"lng":-116.232213},{"id":1365,"lat":43.6809347,"lng":-114.3644168},{"id":1366,"lat":42.864466,"lng":-112.444164},{"id":1367,"lat":42.9310678,"lng":-114.4096664},{"id":1368,"lat":42.406315,"lng":-113.5783814},{"id":1369,"lat":43.5776876,"lng":-116.193464},{"id":1370,"lat":46.4875605,"lng":-115.7989265},{"id":1371,"lat":42.894036,"lng":-112.441027},{"id":1373,"lat":37.8551833,"lng":-96.8499825},{"id":1374,"lat":43.621254,"lng":-116.285467},{"id":1375,"lat":46.7326183,"lng":-117.0246528},{"id":1376,"lat":43.596208,"lng":-116.390291},{"id":1377,"lat":43.593472,"lng":-116.587311},{"id":1378,"lat":43.608995,"lng":-116.197508},{"id":1379,"lat":43.9002355,"lng":-116.20344},{"id":1381,"lat":43.9746177,"lng":-116.90268},{"id":1382,"lat":43.6805409,"lng":-114.3640766},{"id":1383,"lat":43.607763,"lng":-116.603533},{"id":1384,"lat":43.498837,"lng":-112.001354},{"id":1385,"lat":42.5898024,"lng":-114.4601416},{"id":1386,"lat":42.0130058,"lng":-111.8015388},{"id":1387,"lat":43.5900814,"lng":-116.2671316},{"id":1388,"lat":44.7259041,"lng":-116.4394012},{"id":1389,"lat":42.5631093,"lng":-114.4388847},{"id":1390,"lat":43.6338961,"lng":-116.2709102},{"id":1392,"lat":43.634165,"lng":-116.646771},{"id":1393,"lat":43.8734348,"lng":-116.5000284},{"id":1394,"lat":42.6156871,"lng":-113.6720916},{"id":1397,"lat":43.9661111,"lng":-111.6844444},{"id":1398,"lat":43.5983945,"lng":-116.2136108},{"id":1399,"lat":43.5111207,"lng":-112.0161224},{"id":1400,"lat":46.7330816,"lng":-117.0148976},{"id":1401,"lat":42.548872,"lng":-114.450706},{"id":1402,"lat":42.537649,"lng":-113.780903},{"id":1403,"lat":43.6000219,"lng":-116.1933486},{"id":1405,"lat":42.0941018,"lng":-111.876875},{"id":1406,"lat":45.753452,"lng":-116.315653},{"id":1407,"lat":43.6918859,"lng":-116.489992},{"id":1408,"lat":46.4237243,"lng":-117.0009021},{"id":1409,"lat":43.5900634,"lng":-116.2658883},{"id":1410,"lat":44.7311353,"lng":-116.1028401},{"id":1411,"lat":43.588323,"lng":-116.529529},{"id":1412,"lat":43.669416,"lng":-116.67992},{"id":1413,"lat":43.8376004,"lng":-111.7781019},{"id":1414,"lat":43.2198791,"lng":-112.3421011},{"id":1415,"lat":42.8254335,"lng":-114.4335266},{"id":1416,"lat":44.5147255,"lng":-111.2996359},{"id":1417,"lat":43.630866,"lng":-116.202995},{"id":1418,"lat":43.9037116,"lng":-116.9243264},{"id":1419,"lat":42.550021,"lng":-114.478571},{"id":1420,"lat":43.5760239,"lng":-116.274629},{"id":1421,"lat":42.7241673,"lng":-114.5288892},{"id":1422,"lat":43.9132029,"lng":-113.6144736},{"id":1423,"lat":43.467522,"lng":-112.003148},{"id":1424,"lat":43.6918329,"lng":-116.4645991},{"id":1425,"lat":43.6022386,"lng":-116.2371153},{"id":1426,"lat":42.854228,"lng":-112.442169},{"id":1428,"lat":42.9458958,"lng":-112.4665155},{"id":1429,"lat":42.9250836,"lng":-114.9684632},{"id":1430,"lat":43.566832,"lng":-116.5641797},{"id":1432,"lat":43.679547,"lng":-111.906763},{"id":1433,"lat":43.612178,"lng":-116.39125},{"id":1434,"lat":43.691227,"lng":-116.334667},{"id":1436,"lat":43.48318,"lng":-112.056229},{"id":1437,"lat":43.604975,"lng":-116.397312},{"id":1438,"lat":43.6217852,"lng":-116.2186593},{"id":1439,"lat":43.5930729,"lng":-116.193949},{"id":1442,"lat":43.6043259,"lng":-116.2434629},{"id":1443,"lat":46.3897613,"lng":-116.9890981},{"id":1444,"lat":43.6664249,"lng":-116.692909},{"id":1446,"lat":43.5642228,"lng":-116.5728247},{"id":1449,"lat":43.633387,"lng":-116.253689},{"id":1450,"lat":42.2298678,"lng":-111.2634005},{"id":1451,"lat":43.1877135,"lng":-112.3446804},{"id":1452,"lat":48.2402072,"lng":-116.8935579},{"id":1453,"lat":43.8252487,"lng":-111.7895072},{"id":1454,"lat":42.7241217,"lng":-114.5242275},{"id":1455,"lat":48.2760802,"lng":-116.551992},{"id":1456,"lat":43.5961209,"lng":-116.193083},{"id":1457,"lat":42.8649244,"lng":-112.4459673},{"id":1458,"lat":43.1919721,"lng":-112.3414596},{"id":1459,"lat":43.6647663,"lng":-116.6905536},{"id":1461,"lat":43.6516862,"lng":-116.6712311},{"id":1462,"lat":43.579161,"lng":-116.172769},{"id":1463,"lat":43.6496695,"lng":-116.2797695},{"id":1464,"lat":43.6830057,"lng":-114.3643388},{"id":1467,"lat":42.7231549,"lng":-114.5174375},{"id":1468,"lat":46.4078053,"lng":-117.021797},{"id":1469,"lat":44.9105972,"lng":-116.1009361},{"id":1470,"lat":43.5653015,"lng":-116.5729968},{"id":1471,"lat":43.616768,"lng":-116.930722},{"id":1473,"lat":42.542717,"lng":-113.7932431},{"id":1474,"lat":42.6684043,"lng":-113.6011401},{"id":1475,"lat":42.544867,"lng":-113.793648},{"id":1476,"lat":42.537811,"lng":-113.79627},{"id":1479,"lat":43.4885245,"lng":-116.4057607},{"id":1480,"lat":43.611487,"lng":-116.5932059},{"id":1481,"lat":42.526298,"lng":-113.792321},{"id":1482,"lat":43.583243,"lng":-116.556939},{"id":1484,"lat":43.6145361,"lng":-116.2013916},{"id":1485,"lat":42.5780886,"lng":-114.4603468},{"id":1486,"lat":43.6680225,"lng":-116.6810506},{"id":1487,"lat":46.1403174,"lng":-115.9788537},{"id":1488,"lat":43.1311579,"lng":-115.692717},{"id":1489,"lat":46.3777343,"lng":-116.9719947},{"id":1490,"lat":43.6462179,"lng":-116.95169},{"id":1492,"lat":46.7335277,"lng":-117.0013502},{"id":1494,"lat":43.687671,"lng":-116.35495},{"id":1495,"lat":48.274166,"lng":-116.5477179},{"id":1497,"lat":43.5792901,"lng":-116.5594101},{"id":1498,"lat":45.9268143,"lng":-116.128407},{"id":1499,"lat":42.5336322,"lng":-114.364631},{"id":1501,"lat":43.5902492,"lng":-116.3128768},{"id":1502,"lat":46.7376573,"lng":-117.0015188}]
The problem is your
$.each()loop. You are accessing the outer data array rather than the object you’re working with: