メニュー

E-Mail
ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索

Geolocation API

ブラウザの位置情報機能であるGeolocation APIを利用して、
GoogleMapに現在地を表示します。

携帯と同じで、位置情報の表示を求められ、
送信すると、GoogleMapに現在地が表示されます。

※お使いのブラウザでは、対応していない可能性があります。

作ったサンプルサイトは、こちらです。

コードは、下記。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Geolocation API</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=ja"></script>
<script type="text/javascript">

google.maps.event.addDomListener(window, "load", function(){
    var map = document.getElementById("map");

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function(pos) {
            
            var coord = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            var options = {
                zoom: 15,
                center: coord,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
            };

            var gmap = new google.maps.Map(map, options);

            var marker = new google.maps.Marker({
                map: gmap,
                position: coord,
                });
        });
    } else {
        var msg = "お使いのブラウザは、対応していません。";
        map.innerHTML = msg;
    }
});
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.