open google map in a new window reverse geocoding

Question

I want to open a new tab showing the google map with specific marker styling and functionality. I am using reverse geocoding since I have the longitude and latitude data. I am able to open the map in same page but not able open it in a new window.

Thanks in advance

Here is my Curent Code:

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

This is a part of project requirement to show the map in a new tab, using the longitude and latitude values. I can use the google map URL to open it in a new tab, by passing longitude&latitude/location Id but the styling/marker style will not be as required. So I have to use google map API but can't find the solution to above(i.e to open the map in a new tab). — Guruprasad mishra, Apr 17 '18 at 15:13
Thanks....... @tomjosef this is exactly what i needed for my problem. — Guruprasad mishra, Apr 19 '18 at 09:55

score 1 · Accepted Answer · answered Apr 19 '18 at 07:24

You can do this by creating your elements as well as the scripts manually in javascript just like what they did here in 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);
}

You may check the working code sample here: http://jsbin.com/maroviq/edit?html,js,output

Credits to amberija and xomena for the method.

open google map in a new window reverse geocoding

1 Answers1