Javascript 如何从HTML中的用户输入创建google地图？_Javascript_Html_Google Maps_Google Maps Api 3

Javascript 如何从HTML中的用户输入创建google地图？

javascript html google-maps google-maps-api-3

Javascript 如何从HTML中的用户输入创建google地图？,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,我正在制作一个HTML文件，它基本上从用户那里获取纬度和经度坐标，然后打印出一张带有坐标的谷歌地图。我有以下代码。我得到的错误是google没有在“var map=new…”中定义，并且映射没有加载。有一个包含映射的div文件。但它只显示为灰色。每当我与那张空白地图互动时，我都会犯很多错误。代码： <!DOCTYPE html> <html> <head> <title>Find My Phone</title> </head&g

我正在制作一个HTML文件，它基本上从用户那里获取纬度和经度坐标，然后打印出一张带有坐标的谷歌地图。我有以下代码。我得到的错误是google没有在“var map=new…”中定义，并且映射没有加载。有一个包含映射的div文件。但它只显示为灰色。每当我与那张空白地图互动时，我都会犯很多错误。代码：

<!DOCTYPE html>
<html>
<head>
<title>Find My Phone</title>
</head>
<body bgcolor="#2196F3">
<p style="font-size:150%; text-align:center">This is the extension for the   app FindMyPhone. In this site, you can view the coordinates where your phone was traced on a map</p>
Latitude:
<input type="number" step="any" id="Lat"/> <br>
Longitude:
<input type="number" step="any" id="Lng"/> <br>
<button>Submit</button>
<div id="map" style="height:500px;width:500px; color:#9E9E9E">
</div>
<script async defer 
    src= "https://maps.googleapis.com/maps/api/js?key=MyAPIKey&callback=NewMap">
</script>
<script>
document.querySelector('button')
.addEventListener('click',NewMap());
function NewMap() {
 var mapCanvas = document.getElementById('map');
 var Latitude = document.getElementById('Lat');
 var Longitude = document.getElementById('Lng');
 var mapOptions = {
     center: document.getElementById(Latitude, Longitude),
     zoom:15
 }
  var Map = new google.maps.Map (mapCanvas, mapOptions);
}
</script>
</body>
</html>


找到我的电话
这是应用程序FindMyPhone的扩展名。在这个网站上，你可以在地图上查看手机的坐标
纬度：


经度：


提交
document.querySelector（'按钮'）
.addEventListener（'click'，NewMap（））；
函数NewMap（）{
var mapCanvas=document.getElementById（'map'）；
var Latitude=document.getElementById（'Lat'）；
var Longitude=document.getElementById（'Lng'）；
变量映射选项={
中心：document.getElementById（纬度、经度），
缩放：15
}
var Map=new google.maps.Map（mapCanvas，mapOptions）；
}

这是输出的样子：

这是我在不与空白地图交互的情况下得到的错误代码：

这是我在与空白地图交互时得到的错误代码：[（很多错误代码，当你继续移动你的鼠标在包含地图的div之外，错误叠加）[3 ] [3 ] < /P> [！[错误叠加][3][3]

这些地图选项是错误的，您试图通过获取id为经度和纬度的元素来创建中心

尝试不使用选项或至少使用元素中的

.value

function NewMap() {
    var mapCanvas = document.getElementById('map');
    var Latitude = document.getElementById('Lat').value;
    var Longitude = document.getElementById('Lng').value;
    var mapOptions = {
        center:{ lat: Latitude, lng: Longitude },
        zoom:15
    }

    var Map = new google.maps.Map (mapCanvas, mapOptions);
}

我已经检查了你的链接，所以谷歌应该被定义，不过这是一个建议；您正在向google maps API公开显示您的API密钥

您还可以在此处即时运行该函数：

document.querySelector('button').addEventListener('click',NewMap());

因为您使用的是

NewMap（）

，它是对函数的调用，而不是对函数的引用，这使得它在google初始化之前运行。将此更改为：

document.querySelector('button').addEventListener('click',NewMap);

为什么

@Div这就是谷歌推荐的方式it@RobinDorbell你能给我一个链接吗？@RobinDorbell谢谢！对不起，先生。我的错误你公开显示谷歌地图API的API密钥是什么意思？你的谷歌地图API的API密钥是你获取谷歌脚本的地址的一部分。它在链接中显示key=$$$$$$
。所以现在任何看到这篇文章的人都可以用你的钥匙了。很抱歉。但是顺便说一句，当我与谷歌地图互动时，它是黑色的（我不知道原因），我得到了上一张图片中看到的一系列错误，这可能是因为地图没有正确加载。你试过我推荐的修复方法吗？