Object-oriented technology 2013

maps.js

(function(window, undefined) {
    "use strict";

    var map;

    var domUtil = {
        byId: function(id, context) {
            context = context || document;
            return context.getElementById(id);
        },
        byTag: function(tagName, context) {
            context = context || document;
            return context.getElementsByTagName(tagName);
        }
    };

    var util = {
        fetchXml: function(fileName, method, async) {
            async = typeof async !== "undefined" ? false : async;
            var http = new XMLHttpRequest();

            http.open(method, fileName, async);
            http.send();

            return http.responseXML;
        },
        xmlToObject: function(xml) {
            // TODO: 汎用性をもたせる
            var ret = {},
                trips = domUtil.byTag("trip", xml);

            ret.travels = [];
            ret.travels.trip = [];

            for ( var i = 0; i < trips.length; i++ ) {
                ret.travels.trip.push({
                    "place": domUtil.byTag("place", trips[i])[0].textContent,
                    "zahyou": domUtil.byTag("zahyou", trips[i])[0].textContent,
                    "picture": domUtil.byTag("picture", trips[i])[0].textContent,
                    "comment": domUtil.byTag("comment", trips[i])[0].textContent
                });
            }
            return ret;
        }
    };

    function setMarker(map, img) {
        var marker;

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(35.632605,139.88132),
            map: map,
            icon: new google.maps.MarkerImage(
                img.src,
                new google.maps.Size(150, 150),
                new google.maps.Point(0, 0),
                new google.maps.Point(17, 34),
                new google.maps.Size(250, 250)
            )
        });
    }

    function init() {
        var opt = {
                zoom: 8,
                center: new google.maps.LatLng(35.632605, 139.88132),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            mapDiv = domUtil.byId("map-canvas"),
            xml;

        // マップを描画
        map = new google.maps.Map(mapDiv, opt);

        // xmlを取得してマーカーをセット？
        var xml = util.fetchXml("travelstory.xml", "GET");
        var travels = util.xmlToObject(xml).travels;

        travels.trip.forEach(function(trip) {
            trip.img = new Image();
            trip.img.onload = function(img) {
                setMarker(map, trip.img);
            };

            trip.img.src = trip.picture;
        });

        // セレクトリストが選択(change)されたら
        // hogehoge
    }

    google.maps.event.addDomListener(window, "load", init);
}(this));