[Google Maps API v3] Problem using JSON object instead of array

Sun, 14 Mar 2010 08:21:22 -0700 

I haven't played much around with JSON, so this is probably a minor
problem with my code. I can easily ad an array of markers and make the
code work, but I would really like to use a json object instead for
various reasons. I have included the code. Right now it just shows a
map in the middle of nowhere and doesn't reflect the bounds set. Below
this code I have included the code where I am using an Array instead
which works fine.

////////////////////////////////////////////////////// Code with JSON
Object://////////////////////////////////////////////

<html xmlns="http://www.w3.org/1999/xhtml";>
<head><title>Google Suggest</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /
><meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);
  setMarkers(map, JsonObj);
 }
var JsonObj = {"markers": [
{
"lat": 33.098134,
"lng": -83.248951,
"acid": "402",
"type": "location1 type",
"price": "34000"
},
{
"lat": 37.623947,
"lng": -77.337481,
"acid": "944",
"type": "location2 type",
"price": "40000"
}
]};

function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(0, 16));
var shape = {
      coord: [1, 1, 1, 37, 32, 37, 32 , 1],
      type: 'poly'
  };
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.markers.length; i++) {
var location = locations.markers[i];
var myLatLng = new google.maps.LatLng(location.lat, location.lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location.type,
zIndex: location.acid
 });
  bounds.extend(myLatLng);
 map.fitBounds(bounds);
  }
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 50%; height: 50%"></div>
</body>
</html>


////////////////////////////////////////////////////// Code with
Array://////////////////////////////////////////////


<html xmlns="http://www.w3.org/1999/xhtml"; >
<head><title>
        Google Suggest
</title><meta name="viewport" content="initial-scale=1.0, user-
scalable=no" /><meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);
  setMarkers(map, jsonArr);

}

//0=type, 1=GeoLate, 2=GeoLong, 3=id, 4=year, 5=price, 6=pic1
var jsonArr = [
['location1', 33.098134, -83.248951, 402, '1967', '34000',],
['location2', 37.623947, -77.337481, 944, '1977', '40000', 'Pic']
];


function setMarkers(map, locations) {

    var image = new google.maps.MarkerImage('images/airplane-
tourism.png',
    new google.maps.Size(32, 37),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 16));

  var shape = {
      coord: [1, 1, 1, 37, 32, 37, 32 , 1],
      type: 'poly'
  };

  var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: i
});
bounds.extend(myLatLng);
map.fitBounds(bounds);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to