Javascript 谷歌地图叠加在图像上会使图像消失

我有一个谷歌地图叠加在图像上，当页面加载时，谷歌地图基本上会导致图像消失。我正在使用引导。我的HTML如下所示：

<div class="col-md-4">
  <div id="map-canvas">
    <img id="image-formatting" src="some_image.png" alt="image">
  </div>
</div>

---

我希望图像出现在地图后面。当我删除映射时，图像正好位于我想要的位置，在div后面。一旦映射被初始化，图像就会消失

正如@Dr.Molle在评论中所说，“地图API”将在初始化时删除您的内容。它不想要任何东西，因为它是漂亮的地图

这只是一个建议，但要实现您的目标，一个简单的好方法是将地图容器放置在带有背景图像的

div

上（请原谅所有内联样式，这是一个快速而糟糕的示例）

我是一张地图

API在创建地图时会从地图容器中删除任何内容。您必须将图像放置在

#地图画布

之外，以达到所需的效果，这一点非常好。非常感谢。

#map-canvas {
  width: 100%;
  height: 280px;
  background-color: #CCC
}

.image-formatting {
  max-width: 100%;
  height: auto;
  opacity: 0.5;
  z-index: -1;
  position: absolute;
  margin-left: 65%;
}