如何在 Google 地图标记中嵌入交互式仪表板？

Question

例如，假设我在 Google 地图上的缅因州放置了一个标记。单击标记后，将在 Google 地图本身中弹出此交互式仪表板：

https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd

代码中：

      if(props.content){
        var infoWindow = new google.maps.InfoWindow({
          content:props.content
        });

        marker.addListener('click',function(){
          infoWindow.open(map, marker);
        });

我制作了一个标记来监听点击，当点击时，它会打开一个完全空白的信息 window。

我可以将仪表板转换成图像并以这种方式插入，但这不是我想要的。我想嵌入仪表板以保留其交互。

这可能吗？

这是仪表板的嵌入代码：

<div class='tableauPlaceholder' id='viz1552237426081' style='position: relative'><noscript>
  <a href='#'>
    <img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1_rss.png' style='border: none' />
    </a>
</noscript>
  <object class='tableauViz' style='display:none;'>
  <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
  <param name='embed_code_version' value='3' /> <param name='site_root' value='' />
  <param name='name' value='MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3' />
  <param name='tabs' value='no' /><param name='toolbar' value='yes' />
  <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1.png' />
  <param name='animate_transition' value='yes' />
  <param name='display_static_image' value='yes' />
  <param name='display_spinner' value='yes' />
  <param name='display_overlay' value='yes' />
  <param name='display_count' value='yes' />
</object>
</div>
<script type='text/javascript'>
  var divElement = document.getElementById('viz1552237426081');
  var vizElement = divElement.getElementsByTagName('object')[0];
  vizElement.style.width = '1100px';
  vizElement.style.height = '877px';
  var scriptElement = document.createElement('script');
  scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
  vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>

Answer 1

只需将 link 添加到信息窗口内容中，通常添加您喜欢的 html 代码来管理信息窗口内容

if(props.content){
 var infoWindow = new google.maps.InfoWindow({
  content:props.content +
  '<a href="https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd"'>my_link</a>'
 });

 marker.addListener('click',function(){
    infoWindow.open(map, marker);
 });

Answer 2

您可以通过在信息窗口中插入元素，然后在信息窗口的 "domready" 事件侦听器中运行关联 javascript 来显示嵌入仪表板。

var props = {
  content: "https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd",
  id: "viz1552237426081"
};
if (props.id) {
  var infoWindow = new google.maps.InfoWindow({
    content: document.getElementById(props.id)
  });

  marker.addListener('click', function() {
    infoWindow.open(map, marker);
    google.maps.event.addListener(infoWindow, 'domready', function() {
      var divElement = document.getElementById('viz1552237426081');
      var vizElement = divElement.getElementsByTagName('object')[0];
      vizElement.style.width = '1100px';
      vizElement.style.height = '877px';
      var scriptElement = document.createElement('script');
      scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
      vizElement.parentNode.insertBefore(scriptElement, vizElement);
    });
  });
}

proof of concept fiddle

代码片段：

var props = {
  content: "https://public.tableau.com/en-us/s/gallery/moose-crashes-maine?gallery=votd",
  id: "viz1552237426081"
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 45.253783,
      lng: -69.4454689
    }
  });
  // Maine, USA (45.253783, -69.44546889999998)
  var marker = new google.maps.Marker({
    position: {
      lat: 45.253783,
      lng: -69.4454689
    },
    map: map
  });
  if (props.id) {
    var infoWindow = new google.maps.InfoWindow({
      content: document.getElementById(props.id)
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
      google.maps.event.addListener(infoWindow, 'domready', function() {
        var divElement = document.getElementById('viz1552237426081');
        var vizElement = divElement.getElementsByTagName('object')[0];
        vizElement.style.width = '1100px';
        vizElement.style.height = '877px';
        var scriptElement = document.createElement('script');
        scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
        vizElement.parentNode.insertBefore(scriptElement, vizElement);
      });
    });
  }
  map.setCenter(marker.getPosition());
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

.tableauPlaceholder {
  display: none;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<div class='tableauPlaceholder' id='viz1552237426081' style='position: relative'><noscript>
  <a href='#'>
    <img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1_rss.png' style='border: none; height:877px; width:1100px;' />
    </a>
</noscript>
  <object class='tableauViz' style='display:none;'>
  <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
  <param name='embed_code_version' value='3' /> <param name='site_root' value='' />
  <param name='name' value='MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3' />
  <param name='tabs' value='no' /><param name='toolbar' value='yes' />
  <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Mo&#47;MooseCrashesinMaine&#47;MooseCrashes2010-2017Version3&#47;1.png' />
  <param name='animate_transition' value='yes' />
  <param name='display_static_image' value='yes' />
  <param name='display_spinner' value='yes' />
  <param name='display_overlay' value='yes' />
  <param name='display_count' value='yes' />
</object>
</div>
<script type='text/javascript'>
</script>

如何在 Google 地图标记中嵌入交互式仪表板？

How can I embed an interactive dashboard in a Google Map marker?

javascript

embed

google-maps

dashboard

marker