google map v3 地图的基本使用教程 google map v3google maphtmljavascript
程序员文章站
2024-02-14 11:34:16
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google map v3</title>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false&language=zh"></script>
<script type="text/javascript">
<!--
var map;
/*
latitude 纬度
longitude 精度
title 悬浮在标记图标上显示的内容
openInfo 提示窗口内容(InfoWindow)
*/
function initialize(latitude,longitude,title,openInfo) {
//地图定位
var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom : 11, //地图的缩放程度
center : myLatlng, //地图中心位置
mapTypeId : google.maps.MapTypeId.ROADMAP
};
//把地图绑定在ID为map_canvas的DIV上
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//显示地址的标记图标
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:title
// icon: 'http://google-maps-icons.googlecode.com/files/factory.png' //自定义标记图标
});
var infowindow = new google.maps.InfoWindow({ //InfoWindow 内容提示
content: openInfo,
position: myLatlng
});
infowindow.open(map); //显示提示主窗口
//给marker添加点击事件
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map); //如果提示窗口关闭了，点击标记图标可再次显示提示主窗口
});
}
//-->
</script>
</head>
<body onload="initialize('39.87815','116.446686','北京乐平劲松汽车维修有限公司','北京乐平劲松汽车维修有限公司<br/>北京市朝阳区潘家园26楼<br/>010-87716802')">
<div id="map_canvas" style="width: 600px; height: 500px;"></div>
</body>
</html>