<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Google 地图 JavaScript API 示例: 简单的地图</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var map = null;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(25.036772,121.520269), // 設定地圖中心點
mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID,ROADMAP,SATELLITE,TERRAIN
});
addSite(map,'中山',25.062361,121.526194,'台北市中山區林森北路511號');
addSite(map,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號');
addSite(map,'莒光',25.050000,121.420556,'台北市萬華區莒光路315號');
addSite(map,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號');
}
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var prev_infowindow = null;
function addSite(map, siteDesc, lat, lng, address) {
var pt = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
map: map,
position : pt,
title: siteDesc
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
if (prev_infowindow != null) prev_infowindow.close();
prev_infowindow = infowindow;
infowindow.open(map, marker);
});
var LatLngList = new Array (new google.maps.LatLng (25.062361,121.526194), new google.maps.LatLng (25.030000,121.490556), new google.maps.LatLng (25.050000,121.420556),new google.maps.LatLng (25.020833,121.528611));
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
}
$(document).ready(function() { initialize(); });
</script>
</head>
<body onload="initialize()" >
<div id="map" ></div>
</body>
</html>
分享到:
相关推荐
Google Map MarkerCluster使用簡介 可使用此方式使marker自動表現群聚 相當的方便!
Google Map API 接口调用。
谷歌MAP_V3中文详解以及一个简单例子
googleMap__谷歌___地图_.ppt
Google mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle map
google map 的应用实例,可以使用离线地图,很实用
安卓 android google map 谷歌地图
google map v3开发 V3地图搜素,V3地图标注,V3地图多点标注
该实例实现google map和ExtJs结合开发,实现图层管理、图层可见性控制、图层要素详细信息查看等功能。
谷歌地图Google Map API中文开发文档 V3
GOOGLE MAP api 7个案例。 CurrentAddress 得到当前位置 gMap 地形 路线 GoogleMapDemo 当前位置 MAP 绘制路线 MapView 放大缩小 WeatherMap 在MAP上添加图片 WorldCities 城市经纬度的切换 以及 动画切换效果
GoogleMap 开发源码
google mapgoogle mapgoogle mapgoogle mapgoogle mapgoogle map
googleMap根据经纬度获取地理位置,里面有使用代码,只需填入经纬度即可获取地理位置信息
NULL 博文链接:https://zzcjobstudy.iteye.com/blog/2066185
Google Map API 使用示例
下载googlemap,主要用于方便各位下载google地图
google map for android
google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档
详尽的介绍了google map api 并简单的举了几个例子,能帮助你了解Google map 编程