谷歌地图应用

网上看到的谷歌地图应用,效果不错,可以稍作修改化为己用。效果如图:

谷歌地图应用_第1张图片

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Google Maps</title>
 <script src="http://maps.google.com/maps?file=api&v=3&key=ABQIAAAAB4YemV6fPrENI8yI4YDFtRTmwICogzMOKaxKEnhPUPLF-x6hxRR4Q894V3A6N4GoB5q-EdU1SKPArg" type="text/javascript"></script>
  <script type="text/javascript">


    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(23.755181766112635, 120.552978515625), 7);
        map.setUIToDefault(); 
        map.addControl(new GMapTypeControl());  
        map.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(1, 2)));
        map.enableGoogleBar();

      //讀取user.xml
        GDownloadUrl("user.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("row");
          var points = new Array();
          
          for (var i = 0; i < markers.length; i++) {
            point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));
                        
            var marker = new GMarker(point);
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("contact_address");
            var html = "<b>" + name + "</b> <br/>" + address;
           
            GEvent.addListener(marker, "click", function() {
              this.openInfoWindowHtml(html);
              
            });
            map.addOverlay(marker);
          }

        });
      }
    }
  </script>
 </head>
 <body onload="initialize()" onunload="GUnload()">
  <div id="map_canvas" style="width: 700px; height: 400px"></div>
 </body>
</html>

你可能感兴趣的:(谷歌地图应用)