本例子是在google 地图上标记一个坐标,显示图片和信息内容,更可以自定义页面或表格,显示更多图片或列表内容。以下是一个显示图片的简单例子。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Google Maps JavaScript API v3 Example: Event Closure</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta charset="UTF-8" /> <link href="http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> //初始定位 function initialize() { var myOptions = { zoom: 12, center: new google.maps.LatLng(31.980123613394546, 118.80615246875004), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); //添加标记坐标 var myLatLng = new google.maps.LatLng(31.980123613394546, 118.80615246875004); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: "Hello Google Map" }); var zoomLevel; //显示图片 var showImg = "<img src='img/house.jpg' />" + "<br><span>Hello,显示图片了,在这里可以自定义页面显示更多内容</span>"; var infowindow = new google.maps.InfoWindow({ content: showImg, size: new google.maps.Size(50, 50), position: myLatLng }); infowindow.open(map); google.maps.event.addListener(marker, 'click', function () { infowindow.open(map); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas"></div> </body> </html>