Grails 谷歌地图可视化答案

【问题标题】：Grails google maps visualizationGrails 谷歌地图可视化
【发布时间】：2015-10-16 22:26:56
【问题描述】：

我正在使用 Grails 将数据从数据库推送到 Google 可视化。

有没有人足够了解地图包，让onClick框[点击时的描述框]，显示链接？我在这里将它发布到 OpenShift：

http://map-whcw.rhcloud.com/address/map

普惠制代码：

<html>
<head>
<title>Map using address data from database</title>
<meta name="layout" content="main" />


 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script>


 google.load('visualization', '1', { 'packages': ['map'] });
 google.setOnLoadCallback(drawMap);

 function drawMap() {
 var data = google.visualization.arrayToDataTable([
   ['Address', 'Name'],
   <g:each in="${places}" var="place" status="i">["${place.fullAddress}", "${place.longDescription }"],</g:each>

   ]);

   var options = {useMapTypeControl:true, showTip: true };

  var map = new google.visualization.Map(document.getElementById('chart_div'));

map.draw(data, options);
};
 </script>

  </head>
 <body>
    <a href="#show-address" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
    <div class="nav" role="navigation">
        <ul>
            <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
                <li><g:link class="list" action="index"> Address List </g:link>       </li>
                <li><g:link class="create" action="create"> New Address     </g:link></li>
        </ul>
        </div>
    <div id="chart_div"></div>
    <br><br>

     <a href="http://developers.google.com/chart/interactive/docs/gallery/map">Map Visualization Information</a>
<br>
<br>

 </body>
</html>

【问题讨论】：

您是否尝试过为该字段添加链接而不是 longDescription？
developers.google.com/maps/documentation/javascript/examples/…

标签： javascript google-maps grails google-visualization

【解决方案1】：

来自谷歌地图示例页面

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

【讨论】：

我不知道我是怎么错过 InfoWindows 的。我会试一试。谢谢。