Question

我正在尝试在我的网站上添加地图，但它一直在给我一个错误。当我在一个只有地图代码的普通页面上尝试它时，它没有任何其他功能。

HTML：

    <!-- Contact/Area Container -->
<div class="w3-container" id="where" style="padding-bottom:32px;">
    <div class="w3-content" style="max-width:700px">
        <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">WHERE TO FIND US</span></h5>
        <p>Find us at some address at some place.</p>

        <div id="googleMap" class="w3-sepia" style="width:100%;height:400px;"></div>

            <p><span class="w3-tag">FYI!</span> We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggest criteria of them all, both look and taste.</p>
            <p><strong>Reserve</strong> a table, ask for today's special or just send us a message:</p>
            <form action="/action_page.php" target="_blank">
                <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
                <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
                <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
                <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
                <p><button class="w3-button w3-black" type="submit">SEND MESSAGE</button></p>
            </form>
    </div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>

<script type="text/javascript" src="script.js"> </script>

JAVASCRIPT：

function myMap()
{
  myCenter=new google.maps.LatLng(41.878114, -87.629798);
  var mapOptions= {
    center:myCenter,
    zoom:12, scrollwheel: false, draggable: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

  var marker = new google.maps.Marker({
    position: myCenter,
  });
  marker.setMap(map);


}

Answer 1

我的角度应用程序出现错误。为了解决此问题，我删除了链接，并按照以下简单步骤将其连接到Angular Way！

See my answer here

Answer 2

如前所述，确保在myMaps函数之后加载api。如果您是带有myMap代码的外部文件，请执行以下操作：

<script src="<pathtofilewithmyMapsfunction>"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>

或者如果您的页面中内嵌了脚本：

<script>
function myMap()
{
  myCenter=new google.maps.LatLng(41.878114, -87.629798);
  var mapOptions= {
    center:myCenter,
    zoom:12, scrollwheel: false, draggable: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

  var marker = new google.maps.Marker({
    position: myCenter,
  });
  marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>

Answer 3

您的问题是，在加载在行中定义它的文件之前，您指的是myMap函数：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>

这就是为什么你不断获得myMap is not defined，因为它的文件还没有被阅读。

<强>解决方案：

您的脚本应该颠倒过来，在googgle maps链接中引用script.js函数之前包括myMap：

<script type="text/javascript" src="script.js"> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>

Answer 4

在加载DOM内容后加载google Maps文件：

Javascript版本

function init(){
  var element = document.createElement("script");
  element.src = "https://maps.googleapis.com/maps/api/js?key=YOUR-KEY&callback=myMap";
  document.body.appendChild(element);
}

window.addEventListener("DOMContentLoaded",init,false);

jQuery版本

$(document).ready(function() {
   $.getScript('https://maps.googleapis.com/maps/api/js?key=YOUR-KEY&callback=myMap');
}

Answer 5

我的角度应用程序出现错误。要解决此问题，我删除了链接，并按照以下简单步骤将其连接到Angular Way！

Integrating Google Maps in Your Angular Application by Seth Gwartney

InvalidValueError：myMap不是函数

5 个答案: