我无法让谷歌地图 API 与我的简单网页一起使用？
[英]I can't get google maps API to work with my simple web page?
问题描述
I followed the w3schools javascript tutorial exactly, but I can not get these google maps to load on my simple web page.
我完全遵循了 w3schools javascript 教程，但是我无法将这些谷歌地图加载到我的简单网页上。 Help please!请帮忙！ Pretty new to javascript.对 javascript 来说很新。 I'm just typing more here to increase my english:code ratio for stackoverflow.我只是在这里输入更多内容来增加我的英语：stackoverflow 的代码比率。
<!DOCTYPE html> <html> <head> <title>title</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize(){ var mapProp1 = { center: new google.maps.LatLng(69.336822, -44.218045), zoom:9, mapTypeId: google.maps.MapTypeId.ROADMAP }; var mapProp2 = { center: new google.maps.LatLng(39.336822, -84.218045), zoom:9, mapTypeId: google.maps.MapTypeId.SATELLITE } var map = new google.maps.Map(document.getElementById("map1"),mapProp1); var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2); google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div class="content-inner"> <div id="map1"></div> <div id="map2"></div> </div> <footer> </footer> </body> </html>
3 个解决方案
解决方案1
0 2015-06-12 14:16:22
If you aren't running your site on localhost you might be running into security issues.如果您不在本地主机上运行您的站点，您可能会遇到安全问题。 I would look into running python -m SimpleHTTPServer in the root of your project.我会考虑在您的项目的根目录中运行python -m SimpleHTTPServer 。 It should launch an instance of localhost:8000 allowing you to develop your site without running into any security issues.它应该启动一个 localhost:8000 实例，允许您开发站点而不会遇到任何安全问题。 There are obviously many methods to accomplish this but this is simple enough to get you started.显然有很多方法可以实现这一点，但这很简单，可以帮助您入门。
解决方案2
0 2015-06-12 14:20:06
This should do the trick:这应该可以解决问题：
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize(){
var mapProp1 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="content-inner">
<div id="map1" style="width:500px;height:380px;"></div>
<div id="map2" style="width:500px;height:380px;"></div>
</div>
<footer></footer>
</body>
</html>
解决方案3
0 已采纳 2015-06-12 14:21:41
you have three issues:你有三个问题：
- you need to close your initialize function你需要关闭你的初始化功能
- You are missing a semicolon at the end of mapProp2您在 mapProp2 末尾缺少分号
- You need to set the size of the map您需要设置地图的大小
the following should get you started:以下应该让你开始：
function initialize(){
var mapProp1 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
}; // <-- the semicolon was missing
var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);
} //<-- this closing brace was missing
google.maps.event.addDomListener(window, 'load', initialize);
<div class="content-inner">
<!-- in production you should not use inline style. do this in css -->
<div id="map1" style="height:300px;width:300px;"></div>
<div id="map2" style="height:300px;width:300px;"></div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.