不使用回调方法加载谷歌地图

2023-11-22

我的网站上有多个谷歌地图实例,现在同一页面上有两个不同的谷歌地图,发生的情况是第一个有效,其他无效,现在我知道逻辑问题让我先向您展示我的代码

<script>
    function initMap() {
        var myLatLng = {lat: 43.6222102, lng:-79.6694881};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"
        async defer></script>

现在,当我定义一个回调方法时,它总是初始化名为的方法initMap而我想做的是可以有多个谷歌地图让我们假设initMap2我怎样才能加载它们而不需要callback method?


要在没有回调的情况下加载地图,请同步/内联加载 API(无需async defer),然后在加载事件上调用 initMap 函数。

(Note:仅供参考:Google 将所有示例更改为使用异步加载来缩短加载时间)

(Note2:谷歌添加了一个描述同步加载的文档中的“样本”)

概念证明小提琴

代码片段:

function initMap() {
  var myLatLng = {
    lat: 43.6222102,
    lng: -79.6694881
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<!-- added 1/21/2023 to prevent:
Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
-->
<script>
function dummy() {}
window.dummy=dummy;
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

不使用回调方法加载谷歌地图 的相关文章

  • 如何等待第一次画布重绘,直到 @font-face-font 加载?

    我有一个 HTML5 画布并用它编写文本context fillText 使用 font face font 使用 Firefox 3 6 显示页面我遇到问题 在画布的第一次绘制上 字体尚未下载 因此文本将以标准字体显示 我找到了一个 解决
  • 填充重叠的圆形区域

    我有两个相交的圆 我想让相交区域具有颜色 即使这两个圆是透明的 我想我可以找到一些方法用 css 来做到这一点mix blend mode财产 但我没有成功 当然 我可以使圆圈具有颜色并降低其不透明度 但我希望它们是白色或透明的 其中只有重
  • 如何在 HTML 链接中使用 JavaScript 变量

    我正在开发的网站有一个标签指向与网站所具有的 URL 不同的 URL 我想做的是绕过使用下面的 trueURL 标记来查找网页的网址 因为我需要它来构造一些内部锚点 因为我需要网站的实际网址 以便内部锚点正常工作 我遇到的问题是我不知道应该
  • 将全局样式表与故事书和角度结合使用 - SassError:SassError:预期“{”

    几天来 我一直在尝试将全局样式表集成到故事书中 我已经从 sass 支持文档中集成了 webpackFinal 配置 在 storybook 目录中 我创建了一个 scss loader scss 文件 该文件应该加载全局样式表 在 pre
  • 使用 ReactJS 突出显示文本

    我试图突出显示与查询匹配的文本 但我不知道如何让标签显示为 HTML 而不是文本 var Component React createClass highlightQuery function name query var regex ne
  • 按属性首字母对对象数组进行分组

    我对此有点挣扎 自从我编码 JavaScript 以来已经有一段时间了 试图转换它 items data name john name james name joe name brian name bojan name billy name
  • 隐藏加载失败的图片

    我有一个 Android 应用程序 它生成一些在本地 Webkit 视图中呈现的 HTML HTML 生成的细节实际上并不那么重要 除了 大部分来自一个地方 我无法改变它 HTML 周围的模板 包括页眉 页脚 HEAD 等 CSS 和 Ja
  • 如何向 DOM 添加支持 Angular 的元素?

    我想以编程方式添加一些支持 Angular 的 DOM 元素 实际上 我可能需要添加自定义组件 我该怎么做 这是一个简单的小提琴来演示这个问题 http jsfiddle net ZJSz4 2 http jsfiddle net ZJSz
  • React Native 中的动画背景颜色

    我将如何在 React Native 中将一种颜色动画化为另一种颜色 我发现通过插入 Animated Value 您可以通过以下方式对颜色进行动画处理 var BLACK 0 var RED 1 var BLUE 2 background
  • 如何通过两个输入文本字段组合表中的搜索?

    我的桌子看起来像这样 table tr td Apple td td Green td tr tr td Grapes td td Green td tr tr td Orange td td Orange td tr table 搜索的j
  • 在 Angular 2+ 中进行 DOM 操作的正确方法

    我知道有一些类似的问题 但没有人回答我的问题 基本上 以角度方式操作 DOM 的正确方法是什么 比如说我有这个 html
  • 添加/更改 URL 参数并重定向到新 URL

    If the view allURL 中不存在参数 我需要将其与值一起添加到 URL 的末尾 如果它确实存在 那么我需要能够仅更改该值而不创建新的 URL 因为它之前可能有也可能没有其他参数 我找到了这个功能 但我无法让它工作 https
  • JavaScript switch 语句是线性的还是恒定时间的?

    我的网站上有以下 JavaScript 以便在执行某些特定搜索时 答案会被硬编码到特定页面 function redirect var input document getElementById searchBox value toLowe
  • 在 JQueryUI 小部件的 QUnit 测试中测试可见性

    这对于其他人来说可能是显而易见的 但我没有通过搜索找到它 所以在这里发布问题和一个可能的答案 背景 使用自定义 JQuery UI 小部件小部件工厂 http jqueryui com widget 在小部件中 某些元素根据其他数据 选项隐
  • 如何在 html5 中加载部分 html? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 询问我们的问题推荐或查找工具 库或最喜欢的场外资源与 Stack Overflow 无关 因为它们往往会吸引固执己见的答案和垃圾邮件 反而
  • 静态资源和非静态资源有什么区别?

    我主要是一名前端开发人员 设计师 但最近我一直在探索端到端解决方案 昨天 我使用平均堆栈完成了一个 TODO 应用程序 并想开始探索我的 VPS 的部署选项 话虽这么说 有人建议我使用 nginx 作为反向代理来提供静态资源 不幸的是 我陷
  • 如何使我的响应式网站在手机上支持“请求桌面网站”?

    我有一个响应灵敏的动态网站 Java Servlet 驱动且完全手工编码 由于它是一个返回数据表的科学站点 因此某些选项在较小的视口宽度下不可用 然而 可能有些用户更喜欢在桌面网站上挣扎才能访问这些选项 我希望适应他们 我的问题是 对于 i
  • 为什么事件属性不容易获取?

    我有以下代码 HERE https jsfiddle net 5n2zagjc 2 是可编辑的示例 用法 在输入字段中键入并观看控制台 function test event let keys Object keys event let k
  • JSON 数据的动态表单(不同类型)

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p
  • 理解“窗口”对象[重复]

    这个问题在这里已经有答案了 可能的重复 JS 窗口全局对象 https stackoverflow com questions 10035771 js window global object 如何window对象工作 我知道它是顶级对象并

随机推荐