Question

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

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

  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);

这很棒，但我想要包含一些地图通常会显示在左上角的信息框，通常还有地址以及＆＃39;路线＆＃39;的按钮。并且＆＃39;保存＆＃39;。

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

我找到了地图信息框的示例

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

Answer 1

Google Maps JavaScript API

您必须使用HTML，因为它不是可加载的Google Maps Interface的一部分。

这样的事可能会奏效：

<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地图嵌入式地图

更直接的方法是使用Google Maps Embed功能。嵌入网址的示例是：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

默认情况下包含该框。

谷歌地图左上角信息框

1 个答案: