открыть карту гугл в новом окне обратное геокодирование

Я хочу открыть новую вкладку, показывающую карту Google с определенным стилем и функциональностью маркера. Я использую обратное геокодирование, так как у меня есть данные о долготе и широте. Я могу открыть карту на той же странице, но не могу открыть ее в новом окне.

заранее спасибо

Вот мой текущий код:

<!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>

google-maps javascript reverse-geocoding new-window
person Guruprasad mishra    schedule 16.04.2018    source источник
comment
Это часть требований проекта для отображения карты на новой вкладке с использованием значений долготы и широты. Я могу использовать URL-адрес карты Google, чтобы открыть его на новой вкладке, передав идентификатор долготы и широты/местоположения, но стиль стиля/маркера не будет таким, как требуется. Поэтому мне нужно использовать API карт Google, но я не могу найти решение выше (т.е. открыть карту в новой вкладке).   -  person Guruprasad mishra    schedule 17.04.2018
comment
Спасибо ...... @tomjosef это именно то, что мне нужно для моей проблемы.   -  person Guruprasad mishra    schedule 19.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это, создав свои элементы, а также сценарии вручную в javascript, точно так же, как они сделали здесь в пользовательская карта Google в новом окне.

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 для метода.

person tomjosef    schedule 19.04.2018