如何在Javascript中插入Google Maps地址

时间:2019-05-10 06:25:38

标签: javascript google-maps maps

我有此代码:

<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions = {
                center: new google.maps.LatLng(41.8534055, 12.3799142),
                zoom: 16,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(mapCanvas, mapOptions)

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(41.8534055, 12.3799142),
                title:"Angelus Cafe"
            });

            // To add the marker to the map, call setMap();
            marker.setMap(map);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

此代码插入html代码中。

坐标:41.8534055、12.3799142可以,但是地图无法在浏览器中显示。

我不知道为什么。

请帮忙。

谢谢

1 个答案:

答案 0 :(得分:0)

您的代码就可以了。尝试在CSS下方添加

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: new google.maps.LatLng(41.8534055, 12.3799142),
    zoom: 16,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(41.8534055, 12.3799142),
    title: "Angelus Cafe"
  });

  // To add the marker to the map, call setMap();
  marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
  position : absolute;
  width: 100%;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map-canvas"></div>