<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-tw"></script> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { function showInfo(address, title) { var myOptions = { zoom: 11, center: new google.maps.LatLng(22.2, 113.5), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mainMapLayer"), myOptions); $.getJSON("GMapInfoHandler.ashx?address=" + escape(address) + "&title=" + escape(title), function (data) { $("#list").append("<ul>"); $.each(data, function (i) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(data[i].Lat, data[i].Lng), animation: google.maps.Animation.DROP, map: map, title: data[i].Title + "-" + data[i].Address }); $.get("ReportContent.aspx?address=" + escape(data[i].Address) + "&title=" + escape(data[i].Title), function (data) { var infowindow = new google.maps.InfoWindow({ content: data }); google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); }); $("#list").append("<li id=\"list" + i + "\">" + marker.title + "</li>"); $("#list" + i).click(function () { infowindow.open(map, marker); }); }) }); $("#list").append("</ul>"); }); } showInfo("", ""); $("#btnFind").click(function () { var address = $("#txtAddress").val(); var title = $("#txtTitle").val(); showInfo(address, title); }); }) </script> <style type="text/css"> .info{font-family:Consolas;font-size:12px;height:100px;} li{font-family:Consolas;font-size:14px;border:1px solid blue;width:120px;margin:2px;cursor:hand;} div #mainMapLayer,#list{float:left;} </style> </head> <body> <div> <label>名稱*:</label> <input id="txtTitle"/> <label>地址:</label> <input id="txtAddress"/> <input type="button" id="btnFind" value="查找"/> </div> <div id="list"></div> <div style="padding-top:13px;"> <div id="mainMapLayer" style="height: 530px; 1200px;"> </div> </div> </body> </html>
Ref: