【问题标题】:How to display business on embedded google map如何在嵌入式谷歌地图上显示业务
【发布时间】:2017-02-09 14:57:05
【问题描述】:

我尝试在我的嵌入式地图中加入一项业务,但我一辈子都做不到! :D

这是我目前得到的:

<div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: 47.7914, lng: 22.87691};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=MYMAPAPIlanguage=hu&callback=initMap">
</script>

我想加入以下业务: https://www.google.co.uk/maps/place/Boitor+Orsolya,+Cabinet+Medical+Individual/@47.7914061,22.8747236,17z/data=!3m1!4b1!4m12!1m6!3m5!1s0x473805cc6d46a92d:0x18460661870adb34!2sBoitor+Orsolya,+Cabinet+Medical+Individual!8m2!3d47.7914061!4d22.8769123!3m4!1s0x473805cc6d46a92d:0x18460661870adb34!8m2!3d47.7914061!4d22.8769123

我只能在网上找到使用 iframe,因为速度我会避免使用。 谢谢

作为参考,这是我想在没有 iframe 的情况下实现的目标:

【问题讨论】:

标签: javascript google-maps


【解决方案1】:

您唯一需要做的就是添加所需的坐标以添加标记并使地图居中。像这儿。您还可以添加一个 infoWindow 来描述该位置的更多内容。

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.791846, 22.876955), // <--- I found these are the coordinates for the place you mentioned
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  /*
   * create infowindow (which will be used by markers)
   */
  var infoWindow = new google.maps.InfoWindow();

查看此link 以查看正在运行的地图

【讨论】:

  • 谢谢。它已经到了那里,但这仍然不是我试图实现的目标。 :( 我已经用我需要的参考图片更新了这个问题。
【解决方案2】:

使用信息窗口

    var map = new google.maps.Map(element, {
        center: {lat: lat, lng: lng}, //location of the map center
        zoom: 6
    });

    var infoWindow = new google.maps.InfoWindow({map: map});

    //Location of your object
    var pos = {
        lat: lat,
        lng: lng
    };

    infoWindow.setPosition(pos);
    infoWindow.setContent('Business'); //Name of the infowindow

这是它的样子

【讨论】:

猜你喜欢
  • 2019-03-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-17
  • 1970-01-01
  • 1970-01-01
  • 2018-03-31
  • 1970-01-01
相关资源
最近更新 更多