未捕获ReferenceError:未定义google (使用Google Maps API)
未捕获ReferenceError:未定义google (使用Google Maps API)
这个错误是指在使用Google Maps API时，没有正确引入或定义google对象导致的。Google Maps API是一套提供地图和地理位置相关功能的开发工具，可以在网站或应用程序中集成地图、标记、路线规划等功能。
解决这个错误的方法是确保正确引入Google Maps API，并且在代码中正确使用相关的对象和方法。以下是一些可能的解决方案：
- 确保正确引入Google Maps API的JavaScript文件。可以通过在HTML文件的<head>标签中添加以下代码来引入Google Maps API：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>其中，YOUR_API_KEY需要替换为你自己的Google Maps API密钥。如果没有密钥，可以在Google Cloud控制台上创建一个。
- 确保在代码中正确使用google对象。在使用Google Maps API的功能之前，需要先通过google对象来访问相关的类和方法。例如，如果要创建一个地图，可以使用以下代码：
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});这里的google对象是通过Google Maps API引入的。
- 检查是否正确调用了Google Maps API的相关方法。在使用Google Maps API的功能时，需要按照API文档中的要求来调用相关的方法。例如，如果要在地图上添加一个标记，可以使用以下代码：
var marker = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644},
map: map,
title: 'Hello World!'
});这里的google.maps.Marker是Google Maps API中的一个类，通过调用它的构造函数来创建一个标记。
总结：
未捕获ReferenceError:未定义google (使用Google Maps API)错误是由于没有正确引入或定义google对象导致的。解决这个错误的方法是确保正确引入Google Maps API的JavaScript文件，并在代码中正确使用google对象和相关的方法。更多关于Google Maps API的信息和使用方法，可以参考腾讯云的地图服务产品：腾讯位置服务。
相关·内容
在使用google时，我的控制台出现了两个错误：
1-未定义的ReferenceError:初始化未定义
2-您已经在此页面上多次包含了Google。这可能会导致意外的错误，请提供任何帮助？
JS
<script type="text/javascript">
function initialize() {
var myLatLng = {lat: 42.52501, lng: 2.938979};
var map = new google.maps.Map(document.getElementById('map'), {
浏览 0提问于2016-01-31得票数 0
我正在努力使自动完成谷歌地图API工作。然而，每当我加载页面时，我都会得到一个错误“未定义的ReferenceError: google未定义”
HTML
<label>Location</label>
<input id="location_field" type="text" class="form-control" placeholder="Location">
JAVASCRIPT
let locationField = document.getElementById('loca
浏览 5提问于2020-06-15得票数 0
回答已采纳
我已经阅读了文档和例子，但我似乎我不能解决初始化错误(“未捕获ReferenceError:谷歌未定义”+未捕获ReferenceError: homeLatLng未定义)当尝试包含markerwithlabel.js文件时，它提醒我“在地图完成之前无法加载某些东西”的问题。
我能做什么?
尝试的内容：
<head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"></script>
<scr
浏览 1提问于2015-09-21得票数 11
对于我的项目，我需要谷歌地图api。我只能通过脚本标记来提供api，所以我尝试了类似的方法。
我的html：
<head>
<title>app</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>
<body>
{{> hello}}
</body>
<templa
浏览 0提问于2013-05-05得票数 2
回答已采纳
1回答
我的控制台在使用google：-未定义ReferenceError:初始化时出错，请提供任何帮助？
JS
<script type="text/javascript">
function initialize() {
var myLatLng = {lat: 42.52501, lng: 2.938979};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatLng,
scrollwh
浏览 2提问于2016-02-14得票数 2
我有一个使用Google Maps API来显示地图的页面。当我直接加载页面时，地图就会出现。但是，当我尝试使用AJAX加载页面时，我得到了错误：
Uncaught ReferenceError: google is not defined
为什么会这样呢？
这是包含地图的页面：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/ma
浏览 0提问于2013-01-09得票数 88
回答已采纳
1回答
谷歌地图不加载属性，除非我按ctrl+f5。我在vue js安装的钩子中初始化了地图。显示的错误是
挂载钩子中的错误："ReferenceError: google未定义“
当我按ctrl+f5键时，一切都很好
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=****"
async defer></script>
new Vue({
el:'#app&
浏览 3提问于2018-01-13得票数 0
回答已采纳
所以在我的index.html文件中
<script src='https://maps.googleapis.com/maps/api/js?key=##MYKEY##'></script>
在我的app.component.ts文件中
declare var google: any;
@Component({
....
})
export class AppComponent implements OnInit {
....
map;
ngOnInit(): void {
this.map = new
浏览 0提问于2018-02-24得票数 0
1回答
如何在asp.net核心spa角度应用程序中实现谷歌地图，我已经将脚本包含到我的index.cshtml中，但是在从角度访问它时出错了。
import { Component } from '@angular/core';
declare var google: any;
@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent {
constructor() {
var
浏览 1提问于2017-09-07得票数 4
在升级我的路由跟踪应用程序的过程中，我遇到了与Google相关的问题，没有加载导致“未定义的ReferenceError: google是未定义的”错误。
我包括谷歌地图API URL如下：
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
该错误由Javascript中的以下语句生成：
coords = new google.maps.LatLng(myLat, myLong);
这个应用程序以前运行得很好，但不幸的是，我怀疑google引入了重大的变
浏览 0提问于2018-10-26得票数 0
回答已采纳
3回答
我一直试图导入一个外部库(google )，以便在React组件中使用它
index.html文件
<div id="app"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback=initMap" async defer>
react文件
componentDidMount() {
this.map = new
浏览 8提问于2017-01-06得票数 2
回答已采纳
我正在尝试使用getScript()方法动态加载Google，用于“”。( )
下面是我想出的代码：
$.getScript( 'https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places', function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.statu
浏览 1提问于2014-04-20得票数 1
1回答
我试图在Sencha Touch 2中定义我自己的函数，但仍然有一个错误：
未定义ReferenceError: function22未定义
我的文件是:视图目录中的Position.js
Ext.define('GS.view.Position', {
extend: 'Ext.Map',
xtype: 'map',
config: {
title: 'Position',
iconCls: 'time',
useCurrentLocation:true,
mapOption
浏览 2提问于2012-03-31得票数 1
回答已采纳
1回答
请帮助我在google的街道视图中添加一个标记，但是当我把它放在没有工作的地方，我得到了一个未定义的ReferenceError:地图没有定义
这是标记变量
var cafe = new google.maps.LatLng(34.935196, -107.539546);
下面是设置标记的代码
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=ca
浏览 6提问于2015-06-06得票数 1
回答已采纳
1回答
我试图在我的网站head部分显示用户在一个简单的谷歌地图上的位置：
<head>
<!--jquery ,js scripts -->
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="
浏览 2提问于2014-09-23得票数 1
2回答
我试图从带有Google请求的地址中获取纬度和经度，并在页面上显示地图。
从我的请求创建的URL运行良好，并使用JSON信息创建了一个有效的URL：
http://maps.google.com/maps/api/geocode/json?address=<?php echo $_GET['q'];?>&sensor=false
但是我的页面上一直有一个错误：
ReferenceError:未定义file_get_contents
什么都没有展示出来。下面是完整的HTML和JS代码：
<script src="https://maps.
浏览 2提问于2013-07-10得票数 3
回答已采纳
我似乎不知道如何启动基于google脚本GET请求的函数。
export class Map extends Component {
constructor(props) {
super(props);
this.state = {};
};
componentDidMount = function () {
console.log(google); // Uncaught ReferenceError: google is not defined
};
scriptInitialized = fun
浏览 4提问于2017-09-27得票数 2
回答已采纳
当用户将鼠标放在div上时，我使用下面的代码使地图上的标记发生更改。Marker1在初始化()中定义如下：
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|fff
浏览 5提问于2011-05-19得票数 0
回答已采纳
请帮我调试一下Chrome为什么不认识google。我知道这个错误：
未定义的ReferenceError: google没有定义
我已经将API脚本移到顶部，失败了。我调整了自己的代码，以匹配谷歌的文档，失败。是Chrome引起了我的问题吗？
<!DOCTYPE html>
<html>
<head>
<title>weather map</title>
<style type="text/css">
html, body {
margin: 0;
}
浏览 2提问于2015-10-16得票数 1
我的身体里有以下代码
<div id="searchresult" onmouseover="changeMarker(marker1)">
头上还有下面的
function changeMarker(marker) {
alert(marker);
}
现在，当我在div上鼠标操作时，我在javascript控制台中得到了以下错误
Uncaught ReferenceError: marker1 is not defined
如果下面是函数不接受变量的情况，则调用警报框。
function changeMarker() {
aler
浏览 1提问于2011-05-19得票数 1
回答已采纳
3回答
我在我的网站上实现了两种不同的谷歌地图。
第一个简单地显示带有标记的预定义位置，使用MapTypeID为：
google.maps.MapTypeId.ROADMAPThe mapTypeId: mapTypeId第二次允许用户通过拖拽地图上的标记等方式进行交互。
我像这样调用我的API：
<script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=ABQIAAAAfK8z5AsiUZwKZF5CkZMF6BTAb5FWVJrlydeWm3IWDEdBI1HaUhTpyn
浏览 0提问于2011-09-07得票数 4
回答已采纳
我试图使用google将我的地址转换为经度和纬度，然后在页面上显示地图。
只是一个说明im使用PHP/Laravel从DB检索地址。所以，尽管这是纽约的一个硬编码值，但在我完成这项工作后，它将是动态的。
<div id="map" style="height:250px"></div>
Javascript
<script>
var geocoder = new google.maps.Geocoder();
var address = "new york";
geocoder.g
浏览 4提问于2016-08-12得票数 1
回答已采纳
7回答
我试图在React组件中使用Google，但它似乎不起作用。我现在指的是
下面是我的组件的代码：
class ContactBody extends React.Component {
componentWillMount() {
const script = document.createElement("script");
const API = 'AIzaSyDbAz1XXxDoKSU2nZXec89rcHPxgkvVoiw';
script.src = `https://maps.googleapis.com/maps/a
浏览 2提问于2018-01-29得票数 11
回答已采纳
我使用将Google Earth API视图合并到Google Maps API v3实现中。据我所知，这些Google Maps API v3 / Earth API实用程序都是由用户jlivni编写的，到目前为止，哪些代码的可用性对我帮助很大。
(我的实现的非常粗糙的工作原型是)
我遇到的问题是，我想默认(在页面加载时)到Google Earth视图，而不是(如上面的原型) Maps API v3标准视图之一。
的第81、131和133行(未编译？)当在我的JourneyImmersionInitialiseMapLoadGPXAnimate.js中设置Maps API选项时，我在上面的链
浏览 0提问于2012-08-02得票数 2
回答已采纳
我想在带有GeolocationMarker的地图中设置一个标记，但我只得到以下错误
未定义的ReferenceError: GeolocationMarker未定义
我用它就像：
var geoMarker = new GeolocationMarker(mapAllDealer);
google.maps.event.addListenerOnce(geoMarker, 'position_changed', function() {
mapAllDealer.setCenter(this.getPosition());
mapAllDealer.
浏览 3提问于2016-12-19得票数 0
1回答
在我的视图中，当尝试启动函数prova时，此错误比较:未捕获元素:无法读取未定义的属性‘TypeError’。错误发生在行:var map=新的google.maps.Map(document.get.Element.By.Id('pagina')，选项)；
var HomeView = Backbone.View.extend({
template: Handlebars.compile(template),
events: {
"click .log_out":"log_out",
"click .p
浏览 1提问于2013-05-12得票数 0
我目前正在尝试使用require.js模块定义和依赖处理程序加载Google Maps库及其扩展。
我声明了指向Google Maps模块和扩展的路径，如下所示：
"gmaps": "modules/google_maps",
"richmarker": "vendor/google/maps/richmarker.min"
google_maps模块看起来像
define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?key=mykey&a
浏览 0提问于2012-12-19得票数 3
我已经看到这个问题被问了100次，但似乎没有一个答案是有效的。我尝试这样声明一个类：
class Popup extends google.maps.OverlayView {
// Classy stuff
}
但我总是收到错误Uncaught ReferenceError: google is not defined
问题是，在我的代码中，Google Maps在其他地方都可以工作，但在我声明这个类时就不行了。另外，我在像这样的类之后声明它：
@Component({
selector: 'app-map',
templateUrl: './map.co
浏览 2提问于2018-03-24得票数 2
1回答
javascript新手。尝试将标记列表(来自python)添加到google地图。
我的原始Jinja2模板：
<head>
<title>Google Map Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#map-canvas { height: 700px; width: 400px; }
</st
浏览 0提问于2013-05-07得票数 1
回答已采纳
2回答
我试图遍历一些坐标集，在Google地图上绘制向量，但似乎无法正确地使用语法，以便将这些坐标放入：
var buildingCoords1 = [
new google.maps.LatLng(51.49609,-0.27609),
new google.maps.LatLng(51.49604,-0.27502),
new google.maps.LatLng(51.49586,-0.27504),
new google.maps.LatLng(51.49588,-0.27533),
new google.maps.LatLng(51.49563,-0
浏览 4提问于2015-06-26得票数 0
回答已采纳
可能重复：
我的脚本有问题，我想从pos函数中得到值lat，lng，但是当我检查控制台中的元素时，我得到了以下错误：
未定义的ReferenceError: TEST.html:30 (匿名函数)未定义
第30行是: var latlng =新的google.maps.LatLng (lat，lng)；这是我的完整代码：
<script type="text/javascript">
navigator.geolocation.getCurrentPosition (function (pos){
lat = pos.coords.latitude;
浏览 1提问于2013-01-29得票数 3
我正在c#中解析一个xml文件，在这里我得到了一些lat/lng。然后，我调用js函数，在其中创建一些标记：
jsFunc = "createMarker(" + position + "," + HttpUtility.JavaScriptStringEncode(infoStations, true) + ")";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "script" + cpt, "$(function () {" + jsFu
浏览 3提问于2017-05-04得票数 0
回答已采纳
我在CoffeeScript中得到了一个奇怪的行为:从加载的脚本(&callback=initMap)正确地调用了initMap函数，但是在initMap()的最后一行触发了一个错误
# Declare a global function
@initMap = ->
restaurantLocation =
lat: $('#restaurant-map').data("lat")
lng: $('#restaurant-map').data("lng")
map = new (google.
浏览 3提问于2017-11-14得票数 0
回答已采纳
1回答
我想在信息窗口中添加一个按钮。如何在角2中访问我的服务功能？
示例：
import {Injectable} from 'angular2/core';
@Injectable()
export class MapService {
private map: any;
constructor() { }
initialize(): void {
this.map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.
浏览 2提问于2016-05-01得票数 1
回答已采纳
我试图调用一个使用回调和面向对象的javascript来处理google的方法，但是在被调用的函数中，我一直得到一个未定义的错误。
联署材料：
var generateMap = (function(){
var map;
return{
offsetCenter: function(lat, lng){
lat = lat;
lng = lng + .01;
return new google.maps.LatLng(lat, lng);
}
,initialize: function(location){
浏览 3提问于2014-08-27得票数 0
回答已采纳
1回答
我正在尝试从我托管在服务器上的文件创建一个覆盖。我一直在看Google Maps API的v3文档，但我现在卡住了。根据我对的理解，我可以使用
new KmlLayer(url: "http://www.mydomain.com/kmllayer.txt");
调用图层文件。当我打开页面时，我在控制台中得到一个错误，声明：“未定义ReferenceError: KmlLayer”
我已经能够通过转到maps.google.com并在搜索栏中输入kml层文件所在的url来使用这个层，它显示得很好，所以我知道问题不是层本身的问题。
有什么想法吗？
浏览 0提问于2012-09-10得票数 0
回答已采纳
4回答
我在使用Webpack的DefinePlugin在打字稿中声明全球字母时遇到了困难。我希望能得到一些关于我做错了什么的意见。
我在.bash_profile中创建了一个环境变量：
export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx
在我的webpack.config.js中，我有以下几行：
...
plugins: [
new webpack.DefinePlugin({
API_KEY_GOOGLE_MAPS: JSON.stringify(process.env.API_KEY_GOOGLE_MAPS),
}),
],
...
在inde
浏览 4提问于2017-12-14得票数 12
回答已采纳
使用googlemap和QWebEngineView，我想在html文件中添加myscript.js。它在调试中工作得很好，但在发布时就不行了。在发布模式下，找不到myscript.js，错误为js: Uncaught (in promise) ReferenceError: myscriptNameSpace未定义
我正在使用Qt 5.12.2，MSVC 2017
我的qrc文件
<RCC>
<qresource prefix="/">
<file>html/googlemap.html</file>
浏览 85提问于2019-07-05得票数 2
我知道这是一个非常常见的错误，但是我读到了所有其他的“未定义的ReferenceError: google是没有定义的”问题，而且没有一个问题帮助我解决它。我正在使用Google，但是我的应用程序不使用地图，所以我参考了来解决这个问题。
许多答案都提到了在其他事情之前异步加载api脚本，脚本的顺序很重要，但我不认为这是我的问题。我学习了中的例子，所以我不知道自己做错了什么。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta
浏览 1提问于2016-10-28得票数 3
回答已采纳
我试图将将数据导入到Maps ()示例复制到我的角度项目中，但是我在控制台中得到了以下错误：
earthquake_GeoJSONP.js:1 Uncaught ReferenceError: eqfeed_callback is not defined
at earthquake_GeoJSONP.js:1:1
app.component.ts
import { Component, OnInit } from '@angular/core';
import { Loader } from "@googlemaps/js-api-loader"
@C
浏览 4提问于2022-06-01得票数 0
我想知道是否有人能够借给我他们关于Google Maps API的知识。我也读过类似的问题，但还是想不出答案。正如标题所说，在我的浏览器控制台中显示的错误是：
Uncaught TypeError: Cannot read property 'firstChild' of null
我理解这意味着传递值的方式有问题；以下是我在Chrome中sources指向的相关代码片段：
// --- Global Variable
var map;
// --- View Model.
function AppViewModel() {
// Initial Map
map
浏览 1提问于2017-03-21得票数 29
回答已采纳
1回答
我试图制作一个简单的google地图网页，上面有一些标记，但是它没有显示标记，它总是给我带来这个错误：
未定义的ReferenceError: google没有定义
我已经在寻找解决方案了，有些人说我必须先加载谷歌地图库，但我不知道该怎么做。
代码
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. *
浏览 4提问于2016-12-16得票数 0
new MapLabel以前在我所有的程序中都能用，但现在不能用了：
var mapLabelA = new MapLabel(
{
text: ' From Wilkes or Henlow** ',
position: new google.maps.LatLng(49.796600, -97.196000),
map: map,
fontSize: 13,
align: 'right'
}
);
为什么我的maplabels会停止工作？
Failed to lo
浏览 0提问于2016-05-13得票数 0
我在我的网站上使用谷歌地图的api来显示两个位置。谷歌地图在我的本地解决方案中运行得很好，但在我的网站上却没有。我改变了这个消息来源
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"> </script>
为了这件事。我又一次改变了这个
<script type="text/javascript" src="http://maps.google.com/maps/api/
浏览 6提问于2012-09-03得票数 14
回答已采纳
我想用phantomjs {input:address} -> {output:laglat}编写一个地理编码函数
但是，在我包含google api并编写以下代码后，它给出错误并显示："ReferenceError: Can't find variable: google“
var page = new WebPage()
page.includeJs("http://maps.googleapis.com/maps/api/js?key={MY_KEY}&sensor=false", function() {
var geocoder;
浏览 1提问于2014-03-29得票数 2
我的指令"map“中的命名空间现在出现了问题，因为mapInit()函数做得很好。但是我的OverlayView()对象出现错误，无法修复它。这只是google文档中“自定义覆盖”的第一步，但它不起作用。
错误：“未定义ReferenceError: MapSymbol”
app.directive('map', function() {
var linkFunction = function(scope, element, attrs) {
MapSymbol.prototype = new google.maps.OverlayView();
浏览 6提问于2016-05-16得票数 0
3回答
我的代码是这样的
<div id="map" style="width: 200px; height: 200px; border:1px solid #000000; position:absolute"> </div>
<script type="text/javascript">
function ShowMap(Longitude,Latitude,Address){
var map = new GMap(document.getElementById("map"));
浏览 6提问于2012-10-28得票数 0
我尝试使用dart.js调用googlemap，但收到“打破异常: ReferenceError: ReceivePortSync未定义”。有人知道这个例外吗？
import 'dart:html';
import 'dart:js';
import 'package:js/js.dart' as js;
import 'package:google_maps/google_maps.dart';
void main() {
bindMap();
}
void bindMap(){
js.scoped((){
浏览 0提问于2013-08-08得票数 1
回答已采纳
我知道这个问题被问了好几次，但是所有其他线程都不能解决我的问题。我的问题是:我有一个基于角度的应用程序，一些页面使用谷歌地图在地图上显示项目。一切都很好，我没有改变任何一行代码，并注意到谷歌地图现在不工作了。
我在索引文件中导入了google脚本，甚至没有在主页中使用它：
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places&language=ru-RU"></script>
请打开这个url 并转到控制台，等待3秒，这些错误将被显示
浏览 4提问于2015-12-22得票数 1
回答已采纳
当我关闭Google API时，我得到一条“未捕获的TypeError:无法读取未定义的属性'DataTable‘”的消息。
我想捕捉这个未定义的错误，并弹出一个窗口，上面写着"Google已被禁用“，但我不确定什么类型的对象是未定义的。我目前正在检查"DataTable“对象，但我非常确定这是错误的，因为现在无论如何都会弹出窗口。
这是我的代码。
var data = new google.visualization.DataTable();
if(typeof DataTable == "undefined"){
window.alert("
浏览 8提问于2017-07-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
