<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas
{
height: 100%;
}
</style>
<script src="../EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=自己在谷歌申请的key&sensor=false">
</script>
<script type="text/javascript">
var map; //创建map
var infowindow; //信息窗口
function Initialze() {
var myLatlng = new google.maps.LatLng(38.55, 121.36); //初始位置：大连
var myOptions = {
zoom: 8, //地图缩放级别
center: myLatlng, //地图中心位置
mapTypeId: google.maps.MapTypeId.ROADMAP//用户指定地图显示类别
};
//map对象将id为map_canvas（主要，dom容器只要是一般的div等容器就可以）作为容器，并指定了初始化配置信息
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function MarkIcons() {
Initialze();
$.ajax({
type: "GET",
dataType: "JSON",
url: "../AjaxPage/AjaxTest.ashx",
async: false,
cache: false,
success: function(msg) {
$.each(msg, function(i, n) {
var markersArrar = [];
var latitude = n.latitude; //纬度
var longitude = n.longitude; //经度
var title = n.title; //城市
var markmap = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: markmap,
map: map,
title: title
});
markersArrar.push(marker);
(function(i, marker) {
google.maps.event.addListener(marker, \'click\', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent("<div style=\'width:220px; height: 100px\'>城市：" + title + "<div>");
infowindow.open(map, marker);
});
})(i, marker);
});
},
error: function(e, a) { alert(a) }
});
}
window.onload = MarkIcons;
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
ajax是一个json串，格式是这样的：
[{\"title\":\"大连\",\"latitude\":\"38.55\",\"longitude\":\"121.36\"},{\"title\":\"沈阳\",\"latitude\":\"41.48\",\"longitude\":\"123.25\"}]
本人测试过，非常好用。