I am trying to create a google map with multiple locations. The map comes up fine but the markers do not appear for each latitude and longitude. Not sure what I could be doing wrong here. I found the code online, just tweaked it based on what the requirement was. I would appreciate if you could help me out here.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?key=apikey&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var map;
// Cretes the map
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: new google.maps.LatLng(42.0046, -93.2140),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
generateMarkers(
['Albia', 41.0157, -92.8094],
['Algona', 43.0811, -94.2356],
['Altoona', 41.6438, -93.4648],
['Ames', 42.0225, -93.6689],
['Ankeny', 41.7343, -93.6007],
['Atlantic', 41.4041, -94.9899],
['Bedford', 40.6758, -94.7259],
['Bettendorf', 41.5536, -90.4849],
['Bloomfield', 41.7514, -92.4189],
['Boone', 42.0638, -93.8765],
['Burlington', 40.8018, -91.1106],
['Carroll', 42.0713, -94.8771],
['Cedar Falls', 42.513, -92.4328],
['Cedar Rapids', 41.9743, -91.6978],
['Centerville', 40.7383, -92.8678],
['Chariton', 41.0147, -93.3253],
['Charles City', 43.0661, -92.6739],
['Cherokee', 42.7641, -95.5521],
['Clarinda', 40.7267, -95.0378],
['Clinton', 41.8364, -90.1931],
['Columbus Junction', 41.2799, 91.3606],
['Coralville', 41.6821, -91.592],
['Corning', 40.919, -94.7321],
['Corydon', 40.7573, -93.3157],
['Council Bluffs', 41.2613, -95.879],
['Creston', 41.0504, -94.3744],
['Davenport', 41.5105, -90.6202],
['Denison', 42.0168, -95.3535],
['Des Moines', 41.6256, -93.6527],
['Dubuque', 42.4915, -90.7251],
['Eldora', 42.3608, -93.1034],
['Estherville', 43.4021, -94.8286],
['Fairfield', 41.0047, -91.9786],
['Fort Dodge', 42.5052, -94.1581],
['Fort Madison', 40.6268, -91.3424],
['Grimes', 41.6868, -93.7826],
['Grinnell', 41.7347, -92.7269],
['Harlan', 41.6461, -95.3366],
['Humboldt', 42.7318, -94.2168],
['Huxley', 41.8943, -93.6007],
['Indianola', 41.3683, -93.5581],
['Iowa City', 41.6433, -91.5308],
['Iowa Falls', 42.5087, -93.2618],
['Jefferson', 42.0153, -94.375],
['Johnston', 41.6648, -93.6991],
['Keokuk', 40.4151, -91.4033],
['Knoxville', 41.3254, -93.1068],
['Lamoni', 40.6239, -93.9248],
['Laurens', 42.8468, -94.8516],
['Le Mars', 42.7778, -96.1847],
['Leon', 40.7397, -93.7565],
['Marcus', 42.8248, -95.8079],
['Marion', 42.0358, -91.5719],
['Marshalltown', 42.0391, -92.9127],
['Mason City', 43.1485, -93.2357],
['Milford', 43.4325, -95.1498],
['Mount Ayr', 40.7117, -94.233],
['Mount Pleasant', 40.9606, -91.5225],
['Muscatine', 41.4498, -91.0355],
['Newton', 41.6991, -93.0339],
['Osceola', 41.0304, -93.7723],
['Oskaloosa', 41.2949, -92.6497],
['Ottumwa', 41.0168, -92.4387],
['Pella', 41.3969, -92.9029],
['Perry', 41.8288, -94.1037],
['Pleasant Hill', 41.5979, -93.5199],
['Red Oak', 41.0195, -95.2328],
['Sheldon', 43.1866, -95.8314],
['Shenandoah', 40.7618, -95.3848],
['Sioux Center', 43.0562, -96.1754],
['Sioux City', 42.5196, -96.4178],
['Spencer', 43.1461, -95.1465],
['Spirit Lake', 43.4228, -95.1133],
['Storm Lake', 42.6526, -95.2009],
['Urbandale', 41.6294, -93.7369],
['Wapello', 41.1818, 91.1852],
['Washington', 41.2959, -91.7078],
['Waterloo', 42.4726, -92.3767],
['Waukee', 41.6155, -93.8538],
['Waverly', 42.7138, -92.4761],
['Webster City', 42.4695, -93.8246],
['West Des Moines', 41.597, -93.7522],
['Windsor Heights', 41.6004, -93.7151],
['Canton', 40.566, -90.0349],
['Galesburg', 40.9722, -90.3823],
['Hamilton', 40.3932, -91.345],
['Macomb', 40.4587, -90.6482],
['Milan', 41.4439, -90.5694],
['Moline', 41.4899, -90.4769],
['Peoria', 40.7394, -89.6058],
['Peru', 41.3395, -89.1291],
['Quincy', 39.9134, -91.3949],
['Rock Island', 41.4933, -90.5586],
['Silvis', 41.4897, -90.4216],
['Sycamore', 41.9587, -88.7189],
['Lawrence', 38.9428, -95.2814],
['Leawood', 38.9076, -94.6075],
['Lenexa', 38.971, -94.7413],
['Manhattan', 39.1859, -96.5609],
['Mission', 39.0203, -94.6619],
['Olathe', 38.8838, -94.7727],
['Overland Park', 38.9564, -94.7199],
['Prairie Village', 38.9907, -94.6078],
['Shawnee', 39.0148, -94.7432],
['Topeka', 39.0144, -95.7621],
['Albert Lea', 43.6843, -93.3588],
['Austin', 43.68, -92.99],
['Fairmont', 43.6455, -94.4474],
['Faribault', 44.2952, -93.297],
['Mankato', 44.1649, -94.0068],
['Marshall', 44.4379, -95.7763],
['New Ulm', 44.2929, -94.4411],
['Owatonna', 44.0673, -93.2261],
['Rochester', 44.0065, -92.4681],
['Waseca', 44.0899, -93.5068],
['Windom', 43.8671, -95.1144],
['Winona', 44.0469, -91.6762],
['Worthington', 43.6317, -95.5967],
['Albany', 40.2558, -94.3252],
['Belton', 38.8137, -94.5208],
['Bethany', 40.2586, -94.0279],
['Blue Springs', 39.0104, -94.2713],
['Chillicothe', 39.7986, -93.5539],
['Columbia', 38.9549, -92.3832],
['Gladstone', 39.2225, -94.5483],
['Grant City', 40.4875, -94.4069],
['Independence', 39.0784, -94.3946],
['Jefferson City', 38.5859, -92.2559],
['Kansas City', 39.2469, -94.6468],
['Kirksville', 40.1983, -92.5719],
['Lees Summit', 38.9188, -94.36],
['Liberty', 39.2453, -94.4495],
['Maryville', 40.3337, -94.8736],
['Osage Beach', 38.1619, -92.6042],
['Princeton', 40.3972, -93.5869],
['Raytown', 38.9938, -94.4693],
['Springfield', 37.1591, -93.3152],
['St. Joseph', 39.7675, -94.8033],
['Tarkio', 40.4389, -95.3759],
['Trenton', 40.0744, -93.6015],
['Unionville', 40.4722, -93.0192],
['Columbus', 41.4389, -97.3635],
['Fremont', 41.4515, -96.4867],
['Grand Island', 40.918, -98.3823],
['Lincoln', 40.8135, -96.6511],
['Norfolk', 42.0325, -97.4065],
['Omaha', 41.2412, -95.9939],
['Papillion', 41.1374, -96.0242],
['Plattsmouth', 41.0109, -95.9096],
['South Sioux City', 42.4659, -96.4277],
['Brookings', 44.2972, -96.7689],
['Sioux Falls', 43.5317, -96.6716],
['Vermillion', 42.7869, -96.9386],
['Watertown', 44.8899, -97.0947],
['Yankton', 42.8908, -97.3966],
['Madison', 43.1188, -89.3204]
);
}
// This function takes an array argument containing a list of marker data
function generateMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
marker.setMap(map);
}
}
</script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
window.onload = function () {
initialize();
};
</script>
</body>
</html>
You are missing an extra set of square braces around your markers to make it a list of lists, currently the locations argument getting passed to generate markers is only the first point.
It should be
[['Albia', 41.0157, -92.8094]...['Madison', 43.1188, -89.3204]].See this jsfiddle