将谷歌地图添加到我的网站 [英] Adding google maps to my website

问题描述

我有一个页面，我正在尝试向其中添加google map，但是它没有出现在页面中，控制台日志中没有错误，但是它没有出现在我的页面中，这是我的代码:

I have a page and im trying to add google map to it but it doesn't appear in the page, it has no errors in the console log but it doesn't appear in my page, here is my code:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>
            function initialize() {
              var mapOptions = {
                zoom: 15,
                scrollwheel: false,
                center: new google.maps.LatLng((31.993072, 35.862211))
              };

              var map = new google.maps.Map(document.getElementById('googleMap'),
                  mapOptions);


              var marker = new google.maps.Marker({
                position: map.getCenter(),
                animation:google.maps.Animation.BOUNCE,
                icon: 'img/map-marker.png',
                map: map
              });

            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

推荐答案

执行以下操作

1. 在src中添加回调<脚本异步延迟src ="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>;
2. center:new google.maps.LatLng(31.993072，35.862211)代替 center:new google.maps.LatLng((31.993072，35.862211))删除多余的回合括号

1. add callback in src <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>
2. center:new google.maps.LatLng(31.993072, 35.862211) instead of center: new google.maps.LatLng((31.993072, 35.862211)) remove extra round bracket

function initialize() {
  var mapOptions = {
    zoom: 15,
    scrollwheel: false,
    center: new google.maps.LatLng(31.993072, 35.862211)
  };

  var map = new google.maps.Map(document.getElementById('googleMap'),
    mapOptions);


  var marker = new google.maps.Marker({
    position: map.getCenter(),
    animation: google.maps.Animation.BOUNCE,
    //icon: 'img/map-marker.png',
    map: map
  });
}

#googleMap {
  height: 400px;
  width: 100%;
}

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>
<div id="googleMap">

</div>

这篇关于将谷歌地图添加到我的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！