谷歌地图左上角信息框

Question

我正在努力寻找有关谷歌地图元素的文档 我想包括在内。

我的网站上有一个基本的谷歌地图

  function f_init_map() {

     var lv_container = document.getElementById('map_container');

     var lv_coords = new google.maps.LatLng(-29.801270, 30.717932);

     var lv_settings = {
        center: lv_coords,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     }

     var lv_map = new google.maps.Map(lv_container, lv_settings);

     var lv_marker = new google.maps.Marker({
        position: lv_coords,
        map: lv_map,
        title: 'Nowhere',
        icon: 'images/marker_01.png'
     });

  }

  google.maps.event.addDomListener(window, 'load', f_init_map);

这很好，但我想包含一些地图的信息框，该信息框通常显示在左上角，通常包含地址以及“路线”和“保存”按钮。

我如何才能包含此信息框？

我找到了一个地图信息框的例子

http://www.stortown.co.za/self-storage-hillcrest/

Answer 1

谷歌地图 JavaScript API

您必须使用 HTML，因为它不是可加载的 Google 地图界面的一部分。

这样的事情可能会起作用：

<div id="wrapper">
  <div id="map_container"/>
  <div id="topleft">
    <!--Elements to contain inside-->
  </div>
</div>

然后是基本的 CSS：

#topLeft {
  width:300px; /*or something*/
  height:150px;
  position:relative;
  top:20px;
  left:20px;
}

此代码创建一个具有相对定位的 div，这将使其与父元素内的固定坐标对齐。

如果您想要类似于 Google 地图的内容，您可能应该查看源代码，复制 HTML 的可复制元素，并查看是否可以从源中提取一些样式元素。

Google Maps 嵌入式地图

更直接的方法是使用 Google Maps Embed 功能。一个示例嵌入 URL 是：https://maps.google.co.za/maps?q=127+Brackenhill+Road,+Hillcrest,+KwaZulu-Natal&hl=en&sll=-29.865954,31.002399&sspn=0.008346,0.016512&hnear=127+Brackenhill+Rd,+Waterfall,+Hillcrest,+Durban+Metro,+KwaZulu-Natal+3610&t=m&z=17&iwloc=lyrftr:m,4165039167454636329,-29.737933,30.801362&t=m&z=14&output=embed

默认情况下包含该框。