google.load("maps", "3", {"other_params": "sensor=false"});

var map = null;
var markersArray = [];

$(function() {
        var nts = new google.maps.LatLng(40.517137,141.51448);
        var myOptions = {
          zoom: 16,
          center: nts,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var geocoder = new google.maps.Geocoder();

        //リスト読み込み
        $.ajax({
              type: "GET",
              dataType: "jsonp",
              url: "http://www.hachinohe.aomori-da.org/cgi/sunday2.cgi?callback=?",
              success: function(val) {
                    $.each(val.json, function() {
                            var result = $(this);

                            //TR
                            var tr = $("<tr>");
                            tr.append( $("<td>").html( result[0]) );
                            tr.append( $("<td>").html( result[1]) );
                            tr.append( $("<td>").addClass("shikamei").html( result[2]) );
                            tr.append( $("<td>").html( result[3]) );
                            tr.append( $("<td>").html( result[4]) );
                            $("#tbody").append(tr);

                            tr.hover(function() { $(this).addClass("focus") },
                                     function() { $(this).removeClass("focus") });

                            tr.click(function() {
                                    if ( map == null ) {
                                        $("#map").show();
                                        var map = new google.maps.Map( $("#map").get(0), myOptions);
                                    }
                                    var addr = result[4];

                                    // geocoder
                                    geocoder.geocode({ address: addr, country: 'jp' },
                                                     function(results, status) {
                                                         if (status == google.maps.GeocoderStatus.OK) {
                                                             for ( i in markersArray ) {
                                                                 markersArray[i].setMap(null);
                                                             }
                                                             markersArray.length = 0;

                                                             var latlng = results[0].geometry.location;
                                                             var marker = new google.maps.Marker({
                                                                   map: map,
                                                                   title: addr,
                                                                   position: latlng,
                                                                   clickable: true
                                                                 });

                                                             map.panTo(latlng);
                                                             markersArray.push(marker);
                                                             var info = new google.maps.InfoWindow({
                                                                   content: [ result[2], result[3], result[4] ].join('<br>')
                                                                 });
                                                             info.open(map, marker);
                                                         }
                                                     });
                                });
                        });

                  $("td.shikamei").hover(
                      function () {
                          $(this).append($("<span>　☆</span>"));
                      },
                      function () {
                          $(this).find("span:last").remove();
                      }
                  );
              }
            });
    });