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

 

 

你可能感兴趣的:(google maps api)