html - 设置网站背景是google map iframe代码

Question

我需要像这样设置iframe网站背景在此处输入图像描述

我去显示在背景中嵌入谷歌地图并添加任何想法

 <div id='map-canvas'><iframe
          class="custom-google-map"
          src="https://www.google.com/maps/d/embed?mid=1pqr-Kg5Dn8CyoomMIP2j7160niTmiTRi"
          width="100%"
          height="100%"
        ></iframe></div>

标签： htmlcssgoogle-maps

Answer 1

删除 iframe 并仅添加此

<div id='map-canvas'></div>

然后在你的html中添加这个脚本

$(document).ready(function() {
 var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

也添加这个CSS

#map-canvas {
  height: 100%;
  position: absolute; 
  top: 0; 
  bottom: -200px; 
  left: 0; 
  right: 0; 
  z-index: 0;
}

#container {
  z-index: 100;
  position: relative;
}