JavaScript - jQuery and APIs: Objects, Objects Everywhere(Google Maps(LatLngBounds, JSON format)

Head First jQuery
(O'Reilly Media)
Ryan Benedetti(著), Ronan Cranley(著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
• JavaScript (プログラミング言語)

Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 11(jQuery and APIs: Objects, Objects Everywhere)、LONG EXERCISE(No. 5813)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

LONG EXERCISE(No. 5813)

JavaScript(BBEdit, Emacs)

$(document).ready(function() {
    var map,        
        initialize = function () {
            var latlng = new google.maps.LatLng(45.519098, -122.672138),
                mapOpts = {
                    zoom: 13,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                },
                map = new google.maps.Map(
                    document.getElementById('map_canvas'), mapOpts);

            if ($('ddlTypes').length) {
                getAllTypes();
            } else {
                getAllSightings();
            }
        },
        getSingleSighting = function (id) {
            $.getJSON('service.php?action=getSingleSighting&id='+id,
                      function(json) {
                          if (json.sightings.length > 0) {
                              $.each(json.sightings, function() {
                                  var loc = new google.maps.LatLng(
                                      this.lat, this.long),
                                      my_marker = new google.maps.Marker({
                                          position: loc,
                                          map: map,
                                          title: this.type
                                      });
                                  map.setCenter(loc, 20);
                              });
                          }
                      });
        },
        getAllSightings = function () {
            $.getJSON('service.php?action=getAllSightings', function (json) {
                if (json.length > 0) {
                    $('#sight_list').empty();                    
                    $.each(json.sightings, function () {
                        var info = 'Data: ' + this.date +
                            ', Type: ' + this.type,
                            $li = $('<li/>');
                        $li.html(info);
                        $li.addClass('sightings');
                        $li.attr('id', this.id);
                        $li.click(function() {
                            getSingleSighting(this.id);
                        });
                        $li.appendTo('#slit_list');                        
                    });
                }
            });
        },
        getAllTypes = function () {
            $.getJSON('service.php?action=gitSightingsTypes',
                      function(json_types) {
                          if (json_types.creature_types.length > 0) {
                              $.each(json_types.creature_types, function () {
                                  var info = this.type;
                                  $li = $('<option />');

                                  $li.html(info);
                                  $li.appendTo('#ddlTypes');
                              });
                          }
                      });
        },
        markersArray = [],
        bounds = new google.mpas.LatLngBounds(),
        getSightingsByType = function (type) {
            $.getJSON('service.php?action=getSightingsByType&type='+type,
                      function(json) {
                          if (json.sightings.length > 0) {
                              $('#sight_list').empty();
                              $.each(json.sightings, function() {
                                  var loc = new google.maps.LatLng(
                                      this.lat, this.lng),
                                      opts = { map: map, position: loc},
                                      marker = new google.maps.Marker(opts),
                                      $li = $('<li />');
                                  
                                  markersArray.push(marker);
                                  $li.html('Date: ' + this.date +
                                           ', Type: ' + this.type);
                                  $li.addClass('sightings');
                                  $li.appendTo('#sight_list');
                                  bounds.extend(loc);       
                              });
                              map.fitBounds(bounds);
                          }
                      });
        },
        clearOverlays = function () {
            if (markersArray) {
                var i,
                    max;
                
                for (i = 0, max = markersArray.length; i < max; i += 1) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
                bounds = null;
                bounds = new google.maps.LatLngBounds();
            }
        };

    $('ddlTypes').change( function () {
        if ($(this).val() !== '') {
            clearOverlays();
            getSightingsByType( $(this).val() );
        }
    });
    initialize();    
});