代碼如下
XML/HTML代碼
- <html>
- <head>
- <title></title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
- <script type="text/javascript">
- var map;
- function load() {
- var myLatlng = new google.maps.LatLng(33.846467,115.778732); //設置地圖的中心坐標
- var myOptions = {
- //這里的參數可以為多個參數，具體參考MapOptions對象
- zoom: 12,
- center: myLatlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- map = new google.maps.Map(document.getElementById("map"), myOptions);
- var marker = new google.maps.Marker({
- //可以為多個參數，具體參考MarkerOptions對象
- map: map,
- position: myLatlng
- });
- //google.maps.event.addListener(marker, 'click', function(event) {
- //說明：上面的是實現當點擊時出現相關名稱，這里沒有啟用，而是直接顯示
- //這里的infoWindow的 參數可以為多個對象，具體可以參考InfoWindowOptions對象
- var html = '<div ><font color="blue">亳州易天科技</font></div>';
- var infowindow = new google.maps.InfoWindow({ content: html });
- infowindow.open(map, marker);
- //});
- }
- </script>
- </head>
- <body onLoad="load()">
- <div id="nav"><a href="../index.html">易天科技收集：定位至亳州市政府地圖</a> > Google地圖API添加標注</div>
- <table border="1" id="table1" bordercolor="#cccccc">
- <tr>
- <td>
- <div id="map" style="width:600px; height:400px"></div>
- </td>
- </tr>
- </table>
- </body>
- </html>
信息參考http://m7blog.sinaapp.com/google-map-marker/ 下載此演示 查看此演示
