Question

最后，我在2014年创建的Google地图上解决了众所周知的问题“ API Key”错误（在需要Google Maps API的API密钥之前）。我获得了一个密钥，并将其放在<head>中（显然用真实密钥替换了MY_API_KEY）：

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>

并取出旧的<body onLoad="initMap()">，仅留下<body>标签。

该地图曾经只是在警告我有关API密钥的情况下起作用，但现在几乎完全失效（显示背景地图，但其中不应该包含任何标记），首先是Chrome开发者工具出现错误我多次使用API密钥（“您在此页面上多次包含Google Maps JavaScript API。这可能会导致意外错误。”），然后出现很多错误：

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

如果您想看看，地图的旧工作版本在这里：

works with a warning about no API Key

具有API密钥但不能正常工作的版本在这里：

has API key but doesn't work much

我注意到我在这个项目中使用了zepto.js。那会影响事情吗？还使用KML。除此之外，很多代码都基于markers with labels。

沿着这条线还有很多信息窗口：

var intertidalObj = {
    "Intertidal":{name:"Intertidal", infowindow: new google.maps.InfoWindow({maxWidth:520, position: new google.maps.LatLng(48.69176776907712, -122.90861248970032),
      content: "<p class='iw'><strong>Intertidal Community</strong><br>The intertidal zone, also known as the foreshore and seashore, is the area that is above water at low tide and under water at high tide (in other words, the area between tide marks). This area can include many different types of habitats, with many types of animals, such as sea stars, sea cucumbers, sea urchins, crabs, barnacles, octopus, squid, anemones and worms.<br><br><a href='http://www.kwiaht.org'  target='_blank'>Kwiáht</a> and <a href='http://www.irthlingz.org'  target='_blank'>Irthlingz</a> are currently working with Laura Tidwell’s Orcas Middle School marine science students to create an interactive map of Indian Island's rich and fascinating intertidal community.<br><br><img class='pic' src='http://www.monumentalmap.com/monumentalmap/indian_island/intertidal.jpg'><br>Sources: <a href='https://sites.google.com/site/indianislandproject/identification-guides/birds' target='_blank'>Kwiaht</a> and <a href='http://en.wikipedia.org/wiki/Intertidal_zone' target='_blank'>Wikipedia</a></p><br>"}),coordinates:[48.69176776907712, -122.90861248970032]}
        };

google.maps.event.addListener(intertidalObj["Intertidal"].infowindow,'closeclick',function(){
    document.getElementById("Intertidal").checked = false;
});

我还尝试将async defer放在<body>内而不是<head>内。那没有用，从我的谷歌搜索看来，<head>似乎是正确的地方。有什么建议么？我不知道可以尝试其他任何选择。

编辑： @geocodezip：您的建议似乎正确，但是在我删除了您的建议行之后，我在Chrome开发工具中遇到以下错误：

Uncaught ReferenceError: google is not defined
    at eval (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:641)
    at markerwithlabel.min.js:1
VM25:1 Uncaught (in promise) TypeError: MarkerLabel_.getSharedCross is not a function
    at new MarkerLabel_ (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:601)
    at new MarkerWithLabel (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:9546)
    at initMap ((index):171)
    at js?key=MY_API_KEY&callback=initMap:125
    at js?key=MY_API_KEY&callback=initMap:125

由于有人说google未定义，所以我想也许我需要将async defer移到<head>部分的顶部。我尝试过，并遇到以下错误：

monumentalmap.com/:1 Uncaught (in promise) 
Wc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new Wc (https://maps.googleapis.com/m…&callback=initMap:125:108"}
message: "initMap is not a function"
name: "InvalidValueError"

当前，the less functional one在defer async1顶部附近有<head>，并且开发控制台正在显示：

VM511:1 Uncaught ReferenceError: google is not defined
    at eval (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:641)
    at markerwithlabel.min.js:1
(anonymous) @ VM511:1
(anonymous) @ markerwithlabel.min.js:1
VM511:1 Uncaught (in promise) TypeError: MarkerLabel_.getSharedCross is not a function
    at new MarkerLabel_ (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:601)
    at new MarkerWithLabel (eval at <anonymous> (markerwithlabel.min.js:1), <anonymous>:1:9546)

我觉得我只需要将async defer放在正确的位置即可。但不知道在哪里。

Answer 1

最终对我有用的是：

1）消除markerwithlabel.min.js

2）创建一个对象文字（下面的示例代码中的fishObj），其属性是一堆对象文字（例如lingcod，threespine stickleback，tubesnout，{下面的{1}}和northern clingfish-实际上，其中有很多），每个都有三个属性：Pacific sand lance，name和infowindow（纬度/经度

3）使用for / in循环使用普通的旧coordinates（而不是我以前使用的fishObj）遍历“容器”对象（new google.maps.Marker）以实例化地图上的对象，同时向每个对象添加new MarkerWithLabel属性（以及其他一些属性）。（这些属性大多数都是我以前的方法遗留下来的，有些可能不再需要或没有效果。起作用的一个是label，它会创建一个工具提示。）

4）继续使用title：

async defer

在此处查看地图： http://monumentalmap.com.s3-website-us-west-2.amazonaws.com/

下面是一些示例代码：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>

希望这可以帮助面临相同问题的人。

将API密钥添加到旧的Google Maps API项目后，出现“多次使用API密钥”错误

1 个答案:

将API密钥添加到旧的Google Maps API项目后，出现“多次使用API​​密钥”错误

1 个答案:

将API密钥添加到旧的Google Maps API项目后，出现“多次使用API密钥”错误