JavaScript - jQuery and APIs: Objects, Objects Everywhere(Google Maps, drop-down list)

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)、JQUERY CODE MAGNETS(No. 5785)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

JQUERY CODE MAGNETS(No. 5785)

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');
                          });
                      }
                  });
    };

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