Google Maps API w/JSON

[Nole_diver]

Hey all,

Trying to get a map to show up with points read from Json, an example of what the coding looks like is this:
{"earthquakes":[{"eqid":"c0001xgp","magnitude":8.8,"lng":142.369,"src":"us","datetime":"2011-03-11 04:46:23","depth":24.4,"lat":38.322},{"eqid":"2007hear","magnitude":8.4,"lng":101.3815,"src":"us","datetime":"2007-09-12 09:10:26","depth":30,"lat":-4.5172},{"eqid":"2007aqbk","magnitude":8,"lng":156.9567,"src":"us","datetime":"2007-04-01 18:39:56","depth":10,"lat":-8.4528},{"eqid":"2007hec6","magnitude":7.8,"lng":100.9638,"src":"us","datetime":"2007-09-12 21:49:01","depth":10,"lat":-2.5265},{"eqid":"a00043nx","magnitude":7.7,"lng":100.1139,"src":"us","datetime":"2010-10-25 12:42:22","depth":20.6,"lat":-3.4841},{"eqid":"2010utc5","magnitude":7.7,"lng":97.1315,"src":"us","datetime":"2010-04-06 20:15:02","depth":31,"lat":2.3602},{"eqid":"2009mebz","magnitude":7.6,"lng":99.9606,"src":"us","datetime":"2009-09-30 08:16:09","depth":80,"lat":-0.7889},{"eqid":"2009kdb2","magnitude":7.6,"lng":92.9226,"src":"us","datetime":"2009-08-10 17:55:39","depth":33.1,"lat":14.0129},{"eqid":"2010zbca","magnitude":7.6,"lng":123.533,"src":"us","datetime":"2010-07-23 20:51:11","depth":576.3,"lat":6.4939},{"eqid":"2010xkbv","magnitude":7.5,"lng":91.9379,"src":"us","datetime":"2010-06-12 17:26:50","depth":35,"lat":7.7477}]}

Here is my code i have been using for this:

var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(32.7153, -117.1564);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
 function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        var north = results[0].geometry.location.lat() + 1;
        var south = results[0].geometry.location.lat() - 1;
        var east = results[0].geometry.location.lng() + 1;
        var west = results[0].geometry.location.lng() - 1;
        var quakeloc = 'http://api.geonames.org/earthquakesJSON?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west + '&\
    username=********';
        map.setCenter(results[0].geometry.location);
        $.getJSON(quakeloc, function(data){
        $.each(data, function(key, val){
        for(var i = 0; i <data.quakeloc.length; i++)
        var location = new google.maps.LatLng(val[i].lat, val[i].lng);
        var marker = new google.maps.Marker({
        map: map,
        position: location
        title:'Magnitude: ' + val[i].magnitude + ' Depth: ' + val[i].depth + ' Date: ' + val[i].datetime
        });
       }
       });
      });
     }
     else {
          else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    }
  }

`

It all works until i get to reading the Json Data. I have commented code out little by little to see where it messages up at. Once i get to
$.getJSON(quakeloc, function(data){
the script takes a turn for the worst. Any help would be great. ALSO if angone give me some pointers on adding info bubbles that would be great too.

Thanks All.

[Airshow]

A few basic things are wrong.

In codeAddress(), the brackets and curly braces are up the swanny and one of the elses needs to go.

I'm not sure this will work but at least it should load:

var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(32.7153, -117.1564);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var north = results[0].geometry.location.lat() + 1;
            var south = results[0].geometry.location.lat() - 1;
            var east = results[0].geometry.location.lng() + 1;
            var west = results[0].geometry.location.lng() - 1;
            var quakeloc = 'http://api.geonames.org/earthquakesJSON?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west + '&username=********';
            map.setCenter(results[0].geometry.location);
            $.getJSON(quakeloc, function(data){
                $.each(data, function(key, val){
                    for(var i = 0; i <data.quakeloc.length; i++){
                        var location = new google.maps.LatLng(val[i].lat, val[i].lng);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: location,
                            title: 'Magnitude: ' + val[i].magnitude + ' Depth: ' + val[i].depth + ' Date: ' + val[i].datetime
                        });
                    }
                });
            });
        }
    });
    else {
        alert("Geocode was not successful for the following reason: " + status);
    }
}

Airshow

[Airshow]

Even after several edits (my 30 minutes has now expired), it still isn't right - try moving the whole else block up one line and indent one level.

[Nole_diver]

I got it to load. Just no markers are showing up on the map now. I moved the else statement up one above the }); on line 37. So it is loading properly. Now to just get the markers to work i will be in business. If you could to shed some light on that. I would be grateful.

Thanks Again.

[Airshow]

The Google maps API is not the easiest to work with.

Here's a page that works, patched to work with hard-coded data. You will see that the address/geocoder bits are commented out.

Markers are clickable to bring up an info window. Presentation should be easily adapted to exactly what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#map_canvas {
    width: 400px;
    height: 400px;
}
.infowin {
    font-family: verdana,arial;
}
.infowin h3 {
    margin: 10px 0 5px 0;
    padding: 2px 0;
    background-color: #006699;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.3em;
}
.infowin .body {
    padding: 0;
}
.infowin .body p {
    margin: 0;
    padding: 1px 0;
    border: 0 solid #999;
    border-bottom-width: 1px;
    font-size: 11px;
}
.infowin .body p.odd {
}
.infowin .body p.even {
    background-color: #e0f0f0;
}
.infowin div span {
    font-weight: bold;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type='text/javascript'>
var data = {
    "earthquakes":[
        {"eqid":"c0001xgp","magnitude":8.8,"lng":142.369,"src":"us","datetime":"2011-03-11 04:46:23","depth":24.4,"lat":38.322},
        {"eqid":"2007hear","magnitude":8.4,"lng":101.3815,"src":"us","datetime":"2007-09-12 09:10:26","depth":30,"lat":-4.5172},
        {"eqid":"2007aqbk","magnitude":8,"lng":156.9567,"src":"us","datetime":"2007-04-01 18:39:56","depth":10,"lat":-8.4528},
        {"eqid":"2007hec6","magnitude":7.8,"lng":100.9638,"src":"us","datetime":"2007-09-12 21:49:01","depth":10,"lat":-2.5265},
        {"eqid":"a00043nx","magnitude":7.7,"lng":100.1139,"src":"us","datetime":"2010-10-25 12:42:22","depth":20.6,"lat":-3.4841},
        {"eqid":"2010utc5","magnitude":7.7,"lng":97.1315,"src":"us","datetime":"2010-04-06 20:15:02","depth":31,"lat":2.3602},
        {"eqid":"2009mebz","magnitude":7.6,"lng":99.9606,"src":"us","datetime":"2009-09-30 08:16:09","depth":80,"lat":-0.7889},
        {"eqid":"2009kdb2","magnitude":7.6,"lng":92.9226,"src":"us","datetime":"2009-08-10 17:55:39","depth":33.1,"lat":14.0129},
        {"eqid":"2010zbca","magnitude":7.6,"lng":123.533,"src":"us","datetime":"2010-07-23 20:51:11","depth":576.3,"lat":6.4939},
        {"eqid":"2010xkbv","magnitude":7.5,"lng":91.9379,"src":"us","datetime":"2010-06-12 17:26:50","depth":35,"lat":7.7477}
    ]
};
mapInitData = {
    lat: 18.0,
    lng: 114.0,
    zoom: 3
};

onload = function(){
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(mapInitData.lat, mapInitData.lng);
    var myOptions = {
        zoom: mapInitData.zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var infoWindow = new google.maps.InfoWindow();

    function infoClosure(map, marker, val) {
        return function() {
            content = [];
            content.push('<div class="infowin">');
            content.push('<h3>Earthquake Data</h3>');
            content.push('<div class="body">');
            content.push('<p></p>');
            content.push('<p class="odd"><span>ID&nbsp;:&nbsp;</span>' + val.eqid + '</p>');
            content.push('<p class="even"><span>Depth&nbsp;:&nbsp;</span>' + val.depth + '</p>');
            content.push('<p class="odd"><span>Magnitude&nbsp;:&nbsp;</span>' + val.magnitude + '</p>');
            content.push('<p class="even"><span>Lat/Lng&nbsp;:&nbsp;</span>' + val.lat + '&nbsp;/&nbsp;' + val.lng + '</p>');
            content.push('<p class="odd"><span>Date/Time&nbsp;:&nbsp;</span>' + val.datetime + '</p>');
            content.push('<p class="even"><span>Source&nbsp;:&nbsp;</span>' + val.src + '</p>');
            content.push('</div></div>');
            infoWindow.setContent(content.join(''));
            infoWindow.open(map, marker);
        }
    }

    function codeAddress() {
/*
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var north = results[0].geometry.location.lat() + 1;
                var south = results[0].geometry.location.lat() - 1;
                var east = results[0].geometry.location.lng() + 1;
                var west = results[0].geometry.location.lng() - 1;
                var quakeloc = 'http://api.geonames.org/earthquakesJSON?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west + '&username=********';
                map.setCenter(results[0].geometry.location);
                $.getJSON(quakeloc, function(data){
*/
                    $.each(data.earthquakes, function(key, val){
                        var location = new google.maps.LatLng(val.lat, val.lng);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: location,
                            title: 'Magnitude: ' + val.magnitude + ' Depth: ' + val.depth + ' Date: ' + val.datetime
                        });
                        google.maps.event.addListener( marker, 'click', infoClosure(map, marker, val) );
                    });
/*
                });
            }
            else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
*/
    }
    codeAddress();
};
</script>
</head>

<body>

<div id="map_canvas"></div>

</body>
</html>