new google.maps.Point(0, 16)); You have an extra paren. But please post a link to a sample post if you really expect feedback from the group. Additionally, using a developer tool like Firebug would have pointed out this line as an error in the console. (You may have other errors, but I stopped reading)
On Sun, Mar 14, 2010 at 5:44 AM, runboy <[email protected]> wrote: > 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]<google-maps-js-api-v3%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-maps-js-api-v3?hl=en. > > -- 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.
