在新窗口中打开谷歌地图反向地理编码答案

【问题标题】：open google map in a new window reverse geocoding在新窗口中打开谷歌地图反向地理编码
【发布时间】：2018-09-26 14:02:33
【问题描述】：

我想打开一个新标签页，显示带有特定标记样式和功能的谷歌地图。我正在使用反向地理编码，因为我有经度和纬度数据。我可以在同一页面中打开地图，但无法在新窗口中打开它。

提前致谢

这是我当前的代码：

<!DOCTYPE html>
 <html>
  <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Reverse Geocoding</title>
     <style>
       #map {
          height: 100%;
           }
       html, body {
         height: 100%;
         margin: 0;
        padding: 0;
        }

       </style>
 </head>
  <body>

  <input id="latlng" type="text" value="40.714224,-73.961452" >
  <button id="submit" onclick="geocodeLatLng()">knvhcmc</button> 
  <div id="map"> </div>
  <script>

      function geocodeLatLng() {
       debugger;
       var input = document.getElementById('latlng').value;
       var latlngStr = input.split(',', 2);
       var latlng = {lat: parseFloat(latlngStr[0]), lng: 
       parseFloat(latlngStr[1])};
       var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 8,
       center: latlng
    });
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;
    geocoder.geocode({'location': latlng}, function(results, status) {
      if (status === 'OK') {
        if (results[0]) {
          map.setZoom(11);
          var marker = new google.maps.Marker({
            position: latlng,
            map: map
          });
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);  
          var divText = document.getElementById("map").outerHTML;
          var myWindow = window.open('', '', 'width=1000,height=800');
          var doc = myWindow.document;
          doc.open();
          doc.write(divText);

        } else {
          window.alert('No results found');
        }
      } else {
        window.alert('Geocoder failed due to: ' + status);
      }
    });
  }
  </script>
   <script async defer
   src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyCcyyWSd6ETju45EKjArNtJXAJt5w1xecQ&callback=initMap">
  </script>
 </body>
</html>

【问题讨论】：

这是项目要求的一部分，使用经度和纬度值在新选项卡中显示地图。我可以通过传递经度和纬度/位置 ID 使用谷歌地图 URL 在新选项卡中打开它，但样式/标记样式将不是必需的。所以我必须使用谷歌地图API，但找不到上面的解决方案（即在新标签中打开地图）。
谢谢....... @tomjosef 这正是我的问题所需要的。

标签： javascript google-maps reverse-geocoding new-window

【解决方案1】：

您可以通过在 javascript 中手动创建元素和脚本来做到这一点，就像他们在 custom google map in new window 中所做的那样。

function geocodeLatLng(){
  var input = document.getElementById("latlng").value;
  var w = window.open('', '_blank'); //you must use predefined window name here for IE.
  var head = w.document.getElementsByTagName('head')[0];
  w.document.head.innerHTML = '<title>Simple Map</title></head>';
  w.document.body.innerHTML = '<body><H1>Loading</H1><div id="map_canvas" style="display: block; width: 500px; height: 300px; margin: 0; padding: 0;"></div></body>';
  var loadScript = w.document.createElement('script');
  //Link to script that load google maps from hidden elements.
  loadScript.type = "text/javascript";
  loadScript.async = true;
  loadScript.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
  var googleMapScript = w.document.createElement('script');
  //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
  googleMapScript.type = "text/javascript";
  googleMapScript.async = false;
  googleMapScript.text = 'var map;';
  googleMapScript.text += 'function initialize() {';
  googleMapScript.text += '  var latlng = new google.maps.LatLng('+input+');';
  googleMapScript.text += '  var mapOptions = {';
  googleMapScript.text += '    center: latlng,';
  googleMapScript.text += '    zoom: 11, ';
  googleMapScript.text += '  };';
  googleMapScript.text += '  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);';
  googleMapScript.text += '  var marker = new google.maps.Marker({';
  googleMapScript.text += '    position: latlng,';
  googleMapScript.text += '    map: map';
  googleMapScript.text += ' });';
  googleMapScript.text += 'var geocoder = new google.maps.Geocoder;';
  googleMapScript.text += 'var infowindow = new google.maps.InfoWindow;';
  googleMapScript.text += 'geocoder.geocode({"location": latlng}, function(results, status) {';
  googleMapScript.text += ' infowindow.setContent(results[0].formatted_address);';
  googleMapScript.text += ' infowindow.open(map, marker);';
  googleMapScript.text += '});';
  googleMapScript.text += '}';
  head.appendChild(loadScript);
  head.appendChild(googleMapScript);
}

您可以在这里查看工作代码示例：http://jsbin.com/maroviq/edit?html,js,output

感谢 amberija 和 xomena 的方法。

【讨论】：