网页中嵌入地图,爽 .

关注

转载最新推荐文章于 2026-08-10 10:39:06 发布 1k 阅读 AI 写同款· GEO 优化 ›

谷歌地图如何嵌入到网页本文介绍了在网页中嵌入谷歌地图的简单方法。通过Google Maps提供的嵌入功能，用户无需API密钥即可实现：1）搜索目标地点；2）点击菜单选择"分享或嵌入地图"；3）复制iframe代码。文章提供了完整的代码示例和自定义CSS样式建议，包括设置地图容器大小、边框圆角和阴影效果，使地图与网站设计完美融合。这种方法适合快速展示公司位置、旅游景点等场景，能显著提升网站用户体验。阅读详情

转发于：http://blog.youkuaiyun.com/andynq678/article/details/4064727

把以下代码复制到一个文本文档里面,然后把文件扩展名改成.htm,双击打开,可以看到一个电子地图,标有我工作和居住的地方,爽!
如果汉字显示出现乱码,请用记事本打开,选择另存为,把编码改成utf-8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>我的地图</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    
<style type="text/css">
      @import url(" http://www.google.com/uds/css/gsearch.css");
      @import url(" http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
      }
    </style>
  </head>
  <script src=" http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAvqq7_jpnZJuWHIc76SrRehTBfUk9TZrBRaIteybtnU2KziHEpRRwVOVY4d1QygKWoXDIy3n6RqwWNQ&hl=zh-CN"
            type="text/javascript"></script>
<script src=" http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
    <script src=" http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
  <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(40.03868795232629, 116.30976676940918), 13);
        var polyline = new GPolyline([
      new GLatLng(39.907,116.387),
      new GLatLng(39.935,116.407)
  ], "#ff0000", 5);
  map.addOverlay(polyline);
   map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
var markerOffice=new GMarker(new GLatLng(40.03868795232629, 116.30976676940918));
var markerHome=new GMarker(new GLatLng(40.063457197701275, 116.2741470336914))
map.addOverlay(markerHome);
map.addOverlay(markerOffice);
GEvent.addListener(markerHome,"click", function() {
        var myHtml = "这是我培训的地方,也是现在居住的地方";
        map.openInfoWindow(new GLatLng(40.063457197701275, 116.2741470336914), myHtml);
      });
GEvent.addListener(markerOffice,"click", function() {
        var myHtml = "上地创新大厦,我工作的地方";
        map.openInfoWindow(new GLatLng(40.03868795232629, 116.30976676940918), myHtml);
      });
GEvent.addListener(map,"click", function(overlay,latlng) {
          if (latlng) {
            var myHtml = "The GLatLng value is: " + latlng + " at zoom level " + map.getZoom();
            map.openInfoWindow(latlng, myHtml);
          }
        });

   }
    }

     GSearch.setOnLoadCallback(initialize);
    </script>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 1000px; height: 600px"></div>
    <div id="message"></div>
  </body>
</html>

收录于