在新窗口中自定义Google地图 [英] custom google map in new window
本文介绍了在新窗口中自定义Google地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试完成在此处中提到的代码. 但是由于我是Java脚本新手，所以出了点问题，我的猜测是地图根本无法正确加载. DIV也在新选项卡中创建，文本也是如此.请帮助我在新标签页中打开自定义地图. 这是代码:
I try to finish code mentioned here. But something goes wrong as I am new in java-scripting, My guess is the map simply does not loading properly. DIV is created in new tab, text as well. Please help me to open custom map in new tab. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script>
function newWindow() {
var w = window.open('', '_blank'); //you must use predefined window name here for IE.
var head = w.document.getElementsByTagName('head')[0];
//Give some information about the map:
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 = true;
googleMapScript.text = 'var mapOptions = {center: new google.maps.LatLng(50.4,30.50),zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);';
head.appendChild(loadScript);
head.appendChild(googleMapScript);
}
//addLoadEvent(loadScript);
</script>
<button onclick="newWindow()">Click me</button>
</body>
</html>
推荐答案
您似乎没有在第二个脚本对象中定义initialize()函数.
It looks like you didn't define the initialize() function in your second script object.
代码应为
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script>
function newWindow() {
var w = window.open('', '_blank'); //you must use predefined window name here for IE.
var head = w.document.getElementsByTagName('head')[0];
//Give some information about the map:
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 = 'function initialize() {var mapOptions = {center: new google.maps.LatLng(50.4,30.50),zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}';
head.appendChild(loadScript);
head.appendChild(googleMapScript);
}
//addLoadEvent(loadScript);
</script>
<button onclick="newWindow()">Click me</button>
</body>
</html>
您可以在jsbin上看到该示例: http://jsbin.com/loyaca/edit? html，output
You can see the example on jsbin: http://jsbin.com/loyaca/edit?html,output
这篇关于在新窗口中自定义Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
