2013年9月29日 星期日

多地標 Google 地圖

由於工作上的需要，必須在網頁內嵌的 Google 地圖加上兩組（或兩組以上）的地標，且Google Maps JavaScript API 第 3 版 已不需要再申請金鑰就可以使用，所以在變更多地標設定的同時，一併將原先的程式碼變更為最新版本。

以下是一個簡單的範例：




<!DOCTYPE html>
 
<html>
<head>
    <title>多地標Google地圖</title>
    <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js'></script>   
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8">
    
    <style>
        body,input { font-size: 9pt; }
        html { height: 100% }  
        body { height: 100%; margin: 0px; padding: 0px }  
        #map_canvas { height: 100% }        
    </style>
    
    <script>
        $(function () {
            
            var latlng = new google.maps.LatLng(25.041404,121.446438);
   　　　　　var latlng2 = new google.maps.LatLng(25.041399,121.452435);
            //設定地圖參數
            var mapOptions = {
                zoom: 16, //初始放大倍數
                center: latlng, //中心點所在位置
                mapTypeId: google.maps.MapTypeId.ROADMAP //正常2D道路模式
            };
            //在指定DOM元素中嵌入地圖
            var map = new google.maps.Map(
                document.getElementById("map_canvas"), mapOptions);
            //加入標示點(Marker)
            var marker = new google.maps.Marker({
                position: latlng, //經緯度
                title: "新莊棒球場", //顯示文字
                map: map //指定要放置的地圖對象
            });
   　　　　　var marker2 = new google.maps.Marker({
                position: latlng2, //經緯度
                title: "新莊體育館", //顯示文字
                map: map //指定要放置的地圖對象
            });
        });
    </script>

</head>

<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
張貼者： 於
標籤： ,