I've encountered an issue while trying to create a new page with a Google map and title based on the button clicked. Interestingly, when I copy/paste the HTML in the "newhtml" variable into an actual HTML file, it works perfectly fine. However, it does not work with the document.write() function for some reason. After some investigation, I suspect that the problem lies within the last script in the "newhtml" variable. Can anyone offer any insights as to why it's not working?
test.js
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);open_event_test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>Bee Map 2nd Level</title>
</head>
<body>
<h1>Bee Map Proof-of-Concept</h1>
<h3>Carbon County</h3>
<button onclick="myFunction('Bombus balteatus')"><em>Bombus balteatus</em> Dahlbom</button>
<button onClick="myFunction('Bombus auricomus')"><em>Bombus auricomus</em> (Robertson)</button>
<script>
function myFunction(species)
{
var newhtml = '<!DOCTYPE html><html><meta charset="utf-8"><head><script src="https://maps.googleapis.com/maps/api/js"><\/script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><\/script><title>'+species+'<\/title><style>#map-canvas{width:400px;height:300px;}</style><\/head><body><h1><em>'+species+'</em> in County</h1><div id="map-canvas"></div><div id="loc_info"></div><script type="text/javascript" src="test.js"><\/script><\/body><\/html>';
console.log(newhtml);
var newWindow = window.open(species, '_blank');
newWindow.document.write(newhtml);
}
</script>
</body>
</html>