Fork me on GitHub

Google Maps API 

<!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; width: 1200px;">
         </div>
     </div>
 </body>
</html>

Ref:

Google Maps Javascript API V3 Reference

Examples

 

 

posted @ 2013-01-24 17:31  Nick.Chung  阅读(234)  评论(0)  编辑  收藏  举报