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

自分用メモ

```html: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: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: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);
```