JavaScript - jQuery and APIs: Objects, Objects Everywhere(Google Maps(InfoWindow, event))

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)、SHARPEN YOUR PENCIL(No. 5921)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

SHARPEN YOUR PENCIL(No. 5921)

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(),
        info_window = new google.maps.InfoWindow({content: ''}),
        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 info = 'Distance: ' + this.distance + '<br>' +
                                ' Height: ' + this.height + ', Weight: ' +
                                this.weight + ', Color: ' + this.color +
                                '<br>Latitude: ' + this.lat + ', Longitude: ' +
                                this.lng,
                                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);
                            google.
                                maps.
                                event.
                                addListener(marker, 'click',
                                            function () {
                                                info_window.content = info;
                                                info_window.open(map, 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();    
});