google地图api标注调用示例

• 2014-02-08
• 2424 View

定义页面缩放，适应手机浏览器：
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
样式表，定义地图展示宽度和高度：

      html, body, #map-canvas {
        height: 320px;
        width:320px;
        margin: 0px;
        padding: 0px
      }

引用google地图api框架(参数分别是版本，定位用户位置和地图语言，中文语言为zh-cn)：
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&&language=en"></script>

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initialize() {
  var myLatlng = new google.maps.LatLng(31.026545,120.794424);//地图中心位置坐标，可以在谷歌地图搜索得到
  var mapOptions = {
    zoom: 15,//放大程度
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '提示框文字内容';

  var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 260//提示框最大宽度
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: '鼠标tips'
  });
 
  infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);//加载地图


<!--下面是地图容器-->
    <div id="map-canvas"></div>