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