2014年8月18日 星期一

取得 Google Map

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <style type="text/css">
        #user_gmap{ width:600px;height:400px; margin:20px20px 0px; border:solid 1px #111; }
        #user_glink {width:600px; text-align:right; font-size:10px; font-weight:normal; padding:0px; height:20px; margin:0px;}
    </style>

<script type="text/javascript">

        function GetMap() {
            var str1 = "test";
            var text = $("#a1").val();

            //alert(text);

            //取得json格式網址期參數必須編碼
            var ajaxUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(text) + "&sensor=false&language=zh-TW&hl=zh-TW"
            var json = "";
         
            $.ajax({
                async: false,
                type: 'POST',
                url: ajaxUrl,
                dataType: 'text',
                success: function (s1) {    //執行成功後接收回傳值
                    //alert(s1);

                    json = s1;
                }

            });

            var addJson = JSON.parse(json);

            var lat = addJson.results[0].geometry.location.lat;
            var lng = addJson.results[0].geometry.location.lng;
            //alert(lat);

            var mapdiv = document.getElementById('user_gmap');
            var myOptions = {
                zoom: 15,
                center: new google.maps.LatLng(lat, lng),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true
            };
            var map = new google.maps.Map(mapdiv, myOptions);
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                title: ''
            });
            var infowindow = new google.maps.InfoWindow({
                content: '<strong></strong><br />',
                size: new google.maps.Size(200, 200)
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });


        }

 
    </script>

<input type="text" value="" id="a1" />
<input type="button" value="OK" onclick="GetMap()" />
<div id="user_gmap"></div>

標籤:

0 個意見:

張貼留言

訂閱 張貼留言 [Atom]

<< 首頁