Google Mapに現在位置を表示する

Google Mapに位置情報を表示するには、「現在位置を取得する」と同様に現在位置を取得し、その後Google Map APIに位置を指定して表示させます。

---

---

---

<div id="map" style="border: 1px solid #0000FF; width:400px; height:300px;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
if (!navigator.geolocation) {
    var map = document.getElementById("map");
    map.innerHTML = "このブラウザは位置情報をサポートしていません。";
} else {
    navigator.geolocation.getCurrentPosition(showMap, showError,
                {
                    enableHighAccuracy:true,
                    maximumAge:0,
                    timeout:10000
                });
}
function showMap(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;

    // 取得して現在位置をGoogle Maps APIに渡す
    var mapCenter = new google.maps.LatLng(lat, long);
    var mapDiv = document.getElementById("map");
    var options = {
        zoom:16,            // 表示倍率を指定
        center:mapCenter,    // 中央位置を指定
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        scaleControl:true    // 倍率変更を指定
    };
    // 地図を表示
    var map = new google.maps.Map(mapDiv, options);

    // マーカーを表示
    var marker = new google.maps.Marker({
        position:mapCenter,
        map:map,
        title:"現在地"});
    map.setCenter(mapCenter);
}
function showError(error) {
    var l = document.getElementById("map");
    switch(error.code) {
        case error.UNKNOWN_ERROR:
            l.innerHTML = "UNKNOWN_ERROR:" + error.message;
            break;
        case error.PERMISSION_DENIED:
            l.innerHTML = "PERMISSION_DENIED:";
            break;
        case error.POSITION_UNAVAILABLE:
            l.innerHTML = "POSITION_UNAVAILABLE:";
            break;
        case error.TIMEOUT:
            l.innerHTML = "TIMEOUT:";
            break;
    }
}
</script>

---