Fatal编程技术网
  • javascript/
  • Javascript 在新窗口中自定义谷歌地图

Javascript 在新窗口中自定义谷歌地图

javascript html google-maps

Javascript 在新窗口中自定义谷歌地图,javascript,html,google-maps,Javascript,Html,Google Maps,我试着完成上面提到的代码。 但是，由于我是java脚本新手，所以出现了一些问题，我猜映射没有正确加载。DIV在新选项卡中创建，文本也是如此。请帮助我在“新建”选项卡中打开自定义地图。 代码如下： <!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <script> function newWindow() {

我试着完成上面提到的代码。 但是，由于我是java脚本新手，所以出现了一些问题，我猜映射没有正确加载。DIV在新选项卡中创建，文本也是如此。请帮助我在“新建”选项卡中打开自定义地图。 代码如下：

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


测试
函数newWindow（）{
var w=window.open（“”，_blank'）；//您必须在这里为IE使用预定义的窗口名。
var head=w.document.getElementsByTagName（'head'）[0]；
//提供一些有关地图的信息：
w、 document.head.innerHTML='Simple Map'；
w、 document.body.innerHTML='Loading'；
var loadScript=w.document.createElement（'script'）；
//链接到从隐藏元素加载谷歌地图的脚本。
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'）；
//链接到google maps js，在google maps加载后使用callback=…URL参数设置调用函数。
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（谷歌地图脚本）；
}
//addLoadEvent（loadScript）；
点击我
看起来您没有在第二个脚本对象中定义initialize（）函数

代码应该是

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


测试
函数newWindow（）{
var w=window.open（“”，_blank'）；//您必须在这里为IE使用预定义的窗口名。
var head=w.document.getElementsByTagName（'head'）[0]；
//提供一些有关地图的信息：
w、 document.head.innerHTML='Simple Map'；
w、 document.body.innerHTML='Loading'；
var loadScript=w.document.createElement（'script'）；
//链接到从隐藏元素加载谷歌地图的脚本。
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'）；
//链接到google maps js，在google maps加载后使用callback=…URL参数设置调用函数。
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”），maptions）；}；
head.appendChild（loadScript）；
head.appendChild（谷歌地图脚本）；
}
//addLoadEvent（loadScript）；
点击我
您可以在jsbin上看到这个示例：

谢谢Xomena，这很有效，而且对于Interctive编码站点也是如此！请随意接受答案。这是一种非常感谢的方式。：）