javascript Google Maps API v3 - TypeError: 表达式 'google.maps.LatLng' [undefined] 的结果不是构造函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6577404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 21:09:53  来源:igfitidea点击:

Google Maps API v3 - TypeError: Result of expression 'google.maps.LatLng' [undefined] is not a constructor

javascriptgoogle-maps-api-3

提问by Steve Kemp

I'm creating a static html page to display a number of locations from a data. I've just copied one of the samples and are working backwards but I'm getting the following error in the Safari Inspector:

我正在创建一个静态 html 页面来显示数据中的多个位置。我刚刚复制了其中一个示例并正在向后工作,但在 Safari Inspector 中出现以下错误:

main.js:1SyntaxError: Parse error
sample.htm:10TypeError: Result of expression 'google.maps.LatLng' [undefined] is not a constructor.

Here's my html code:

这是我的 html 代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Multi Markers Sample via Google Maps</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() {
var myLatlng = new google.maps.LatLng(-30.2965590,153.1152650);
var myLatlng1 = new google.maps.LatLng(-30.2956470,153.1123707);
var myLatlng2 = new google.maps.LatLng(-30.2864430,153.1360230);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png',
title:"Original Location"     });   
var marker = new google.maps.Marker({
position: myLatlng1,
map: map,
title:"Tom Cruise"     }); 
var marker = new google.maps.Marker({
position: myLatlng2,
map: map,
title:"Lady Gaga"     }); 
} 
</script> 
</head> 
<body onLoad="initialize()">   
<div id="map_canvas"></div> 
</body> 
</html>

I'm not sure what I'm doing wrong here - it actually works in IE v8 on Windows but not in Safari and I need to get it working for both.

我不确定我在这里做错了什么 - 它实际上可以在 Windows 上的 IE v8 中运行,但不能在 Safari 中运行,我需要让它同时适用于两者。

回答by ThatGuy

Add callback function to your google maps request. It'll be executed after Google loads everything it needs.

向您的谷歌地图请求添加回调函数。它将在 Google 加载所需的一切后执行。

http://maps.google.com/maps/api/js?sensor=false&callback=initialize

回答by Ali Nirabi

hi please use this code using JQuery `

嗨,请使用 JQuery 使用此代码`

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Multi Markers Sample via Google Maps</title> 
    <script src="js/jquery-1.10.2.min.js"></script>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
      <style>
        #map_canvas {
            height: 500px;
            width: 100%;
        }
    </style>
<script type="text/javascript">
    $(document).ready(function () {
        var myLatlng = new google.maps.LatLng(-30.2965590, 153.1152650);
        var myLatlng1 = new google.maps.LatLng(-30.2956470, 153.1123707);
        var myLatlng2 = new google.maps.LatLng(-30.2864430, 153.1360230);
        var myOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png',
            title: "Original Location"
        });
        var marker = new google.maps.Marker({
            position: myLatlng1,
            map: map,
            title: "Tom Cruise"
        });
        var marker = new google.maps.Marker({
            position: myLatlng2,
            map: map,
            title: "Lady Gaga"
        });
    });
</script> 
</head> 
<body >  
<div id="map_canvas"></div> 
</body> 
</html>`