XMLの情報からGoogleMapにピンを刺す #JavaScript

自分用メモ

tast1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>TASK 1</title>

    <!-- Google Map API. サービスとして運用する場合にはAPI keyを追加する必要がある -->
    <script src="https://maps.googleapis.com/maps/api/js"></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!--cross-domainの問題を解決するファイル-->
    <script src="js/jquery.xdomainajax.js"></script>

    <!-- 課題で編集するjavascriptのファイルパス -->
    <script src="js/readXml.js"></script>
</head>
<body style="margin: 0px; padding: 0px;">
    <!-- Google Mapを表示 -->
    <div id="map" style="width: 2000px; height: 1200px;"></div>

    <!-- Debug用(ヒント用のソースコードで使用している。無視してもOK)-->
    <div id="debug"></div>
</body>
</html>

js/readXml.js

$(function() {

    var latlng = new google.maps.LatLng(35.709700250, 139.762555620);

    var mapOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map;

    $.ajax({
        url: 'http://www.nakl.t.u-tokyo.ac.jp/tmp/GPS/hongo.xml',
        type: "GET",
        success: function(res) {
            xml = $.parseXML($(res.responseText).text());
            console.log(xml);

            map = new google.maps.Map(document.getElementById('map'), mapOptions);

            for ( var i = 0;  i < xml.getElementsByTagName("trkpt").length;  i++  ) {
                var x = xml.getElementsByTagName("trkpt")[i];
          var lat = x.getAttribute("lat");
                var lon = x.getAttribute("lon");
                var mylatlng = new google.maps.LatLng(lat,lon);

                var marker = new google.maps.Marker({
                position: mylatlng,
                map: map
              });
            };

            // 現在地を取得してみる
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        var mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        var marker = new google.maps.Marker({
                            map : map,
                            position : mapLatLng
                        });
                    }
                )
            }
        }
    });

});

js/jquery.xdomainajax.js

/**
 * jQuery.ajax mid - CROSS DOMAIN AJAX 
 * ---
 * @author James Padolsey (http://james.padolsey.com)
 * @version 0.11
 * @updated 12-JAN-10
 * ---
 * Note: Read the README!
 * ---
 * @info http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
 */

jQuery.ajax = (function(_ajax){

    var protocol = location.protocol,
        hostname = location.hostname,
        exRegex = RegExp(protocol + '//' + hostname),
        YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys',
        query = 'select * from htmlstring where url="{URL}" and xpath="*"';

    function isExternal(url) {
        return !exRegex.test(url) && /:\/\//.test(url);
    }

    return function(o) {

        var url = o.url;

        if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {

            // Manipulate options so that JSONP-x request is made to YQL

            o.url = YQL;
            o.dataType = 'json';

            o.data = {
                q: query.replace(
                    '{URL}',
                    url + (o.data ?
                        (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
                    : '')
                ),
                format: 'xml'
            };

            // Since it's a JSONP request
            // complete === success
            if (!o.success && o.complete) {
                o.success = o.complete;
                delete o.complete;
            }

            o.success = (function(_success){
                return function(data) {

                    if (_success) {
                        // Fake XHR callback.
                        _success.call(this, {
                            responseText: (data.results[0] || '')
                                // YQL screws with <script>s
                                // Get rid of them
                                .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
                        }, 'success');
                    }

                };
            })(o.success);

        }

        return _ajax.apply(this, arguments);

    };

})(jQuery.ajax);