自定义Google地图信息窗口？

Question

我正在建立一个客户网站,一个当地教会.我已使用"地图"页面上的"链接"功能嵌入了Google地图.地图上的信息窗口包含"评论",教会对此表示担忧.有没有办法从信息窗口中删除它？我不想删除任何评论本身,只是信息窗口上的链接？

这可能吗？是否可以通过查询字符串操作任何其他自定义选项(除了大小)？

Answer 1

大约2年前,我使用API​​和一些代码操作创建了一个完全控制气泡内容的自定义地图.点击上面的链接进行演示.我已经清理了这个答案的代码,但为了实现你需要用适当的值替换所有的YOUR__BLANK__HERE文本.

第1步:调用gMaps API

<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY_HERE"
        type="text/javascript">
</script>

第2步:在文档正文中,创建一个id为"map"的元素.使用CSS调整大小和位置.它需要高度和宽度.

    <div id="map" class="content"></div>

第3步:在DOM中定义div后,可以安全地插入以下脚本标记:

<script type="text/javascript">
//<![CDATA[

// Check to see if this browser can run the Google API
if (GBrowserIsCompatible()) {

  var gmarkers = [];
  var htmls = [];
  var to_htmls = [];
  var from_htmls = [];
  var i=0;

  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
    var marker = new GMarker(point);

    // The info window version with the "to here" form open
    to_htmls[i] = html +
       '<br />Start address:<form action="http://maps.google.com/maps" method="get">' +
       '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
       '<INPUT value="Get Directions" TYPE="SUBMIT">' +
       '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
              // "(" + name + ")" + 
       '"/>';
    // The inactive version of the direction info
    html = html + '<br><a href="javascript:tohere('+i+')">Get Directions<'+'/a>';

    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(html);
    });
    gmarkers[i] = marker;
    htmls[i] = html;
    i++;
    return marker;
  }

  // functions that open the directions forms
  function tohere(i) {
    gmarkers[i].openInfoWindowHtml(to_htmls[i]);
  }

  // Display the map, with some controls and set the initial location 
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(
    YOUR_LATITUDE_HERE,
    YOUR_LONGITUDE_HERE
    ), 
    YOUR_ZOOM_LEVEL_HERE // a value of 13 worked for me
  );

  // Set up one marker with an info window 
  var marker = createMarker(
    new GLatLng(
      YOUR_LATITUDE_HERE,
      YOUR_LONGITUDE_HERE
    ),
    'YOUR_MARKER_NAME_HERE',
    '<i>YOUR_HTML_HERE<'+'/i>');

  /* repeat the process to add more markers
  map.addOverlay(marker);
  var marker = createMarker(
    new GLatLng(
      YOUR_LATITUDE_HERE,
      YOUR_LONGITUDE_HERE
    ),
    'YOUR_MARKER_NAME_HERE',
    '<i>YOUR_HTML_HERE<'+'/i>');
  map.addOverlay(marker);*/
}


// display a warning if the browser was not compatible
else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}

// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/   
// http://www.econym.demon.co.uk/googlemaps/

//]]>
</script>

使用此代码,气泡包含您在YOUR_HTML_HERE中指定的html以及获取路线的链接,该链接(单击时)变为要求输入起始地址的文本框.不幸的是,查询的结果在新的浏览器窗口中打开(因为,在原始发布时,API不包括路线功能)