Google Maps API地圖應(yīng)用示例分享

更新時間：2014年10月23日 10:57:30 投稿：hebedich

這篇文章主要分享一段了Google Maps API地圖應(yīng)用示例，做項目中經(jīng)常會使用到，非常的簡單，有需要的朋友可以參考下

效果（新版Firefox中測試）：

代碼：

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>Google Map</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function init()
    {
      // 獲取當前位置
      navigator.geolocation.getCurrentPosition(function(position)
        {
          var coords = position.coords;
          // 設(shè)定地圖參數(shù)，將當前位置的經(jīng)緯度設(shè)置為中心點
          var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
          var myOptions = 
          {
            // 放大倍數(shù)
            zoom:14, 
            // 標注坐標
            center:latlng,
            // 地圖類型
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          var map1;
          // 顯示地圖
          map1 = new google.maps.Map(document.getElementById('map'),myOptions);
          // 創(chuàng)建標記
          var marker = new google.maps.Marker(
            {
              position:latlng,
              map:map1
            });
          // 設(shè)定標注窗口，附上注釋文字
          var infowindow = new google.maps.InfoWindow(
            {
              content:"當前位置"
            });
          // 打開標注窗口
          infowindow.open(map1,marker);
        });
    }
  </script>
</head>
<body onload="init()">
  <div id="map"></div>
</body>
</html>