json

I had partial success with my mapping project this weekend.

I had originally planned to map each state with little popup boxes showing details on the numbers for each state. It turns out that I greatly underestimated both my skills with JSON files and the Google APIv3 for maps.

But let me back up. I did have success mapping multiple points on a map. I also successfully mapped a point on a map with a detail window on click (click on the marker to see the details.) However, when I tried to map multiple points on a map with detail boxes, that’s where the train went off the rails.

Apparently, the Google Maps API has issues with looping through a long list of details to set markers and info boxes. It only pulls the last info box in the list. There are a nice bunch of tutorials on how to fix the issue, BUT since I am not as well schooled in javascript and calling JSON information, I could not get it to work.. although I did try. My attempt to get it to work is avail here and frankly, I think it’s a big old mess. For one, I’m not sure how to call the separate JSON file. [The tutorial I was using is here. I have his book and his examples were working well for me up until this point, which makes me think it’s a js/json problem.]

For reference, here is my JSON data.

var json = [
{
"state": "Virginia",
"lat": 37.768002,
"lng": -78.205704,
"detail": "In Virginia, 1254 men were executed between 1620 and 2002; 88 women were executed in this same time frame."
},
{
"state": "West Virginia",
"lat": 38.467999,
"lng": -80.969597,
"detail": "In West Virginia, 150 men were executed between 1620 and 2002; 4 women were executed in this same time frame.."
},
{
"state": "Maryland",
"lat": 39.072399,
"lng": -76.790199,
"detail": "In Maryland, 293 men were executed between 1620 and 2002; 11 women were executed in this same time frame.."
}
]

var json = [

{

"state": "Virginia",

"lat": 37.768002,

"lng": -78.205704,

"detail": "In Virginia, 1254 men were executed between 1620 and 2002; 88 women were executed in this same time frame."

{

"state": "West Virginia",

"lat": 38.467999,

"lng": -80.969597,

"detail": "In West Virginia, 150 men were executed between 1620 and 2002; 4 women were executed in this same time frame.."

{

"state": "Maryland",

"lat": 39.072399,

"lng": -76.790199,

"detail": "In Maryland, 293 men were executed between 1620 and 2002; 11 women were executed in this same time frame.."

}

]

I’ll continue to try to debug and hack at it to get it to work, but I’m finding the online documentation only partially helpful. One big problem is that I’m not totally confident that I know how to code the start and end to each file. So when I find code snippets of “solutions” to common problems, I’m not entirely sure where to put the code. Since the order is really important, I’m sure I have some things out of order.

Full code examples would be more helpful so that I can see it in context, but I know this is a learning curve problem, and that it will diminish with time. These “help” blog posts are written for experienced coders and right now I’m a hack at best. So for the time being, I’m embracing my hack status and putting this to the side as a problem for another day.