Question

我写了一个脚本来添加地图到我的网站。它如下：

<script>
        function initialize() {
            var mapCanvas = document.getElementById('map');
            var mapOptions = {
                center: new google.maps.LatLng(12.9583182, 77.6398512),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(mapCanvas, mapOptions)
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>

HTML code:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
</div>

css:

 #map{
    width: 500px;
    height: 400px;
}

我为针脚指向位置添加了此代码：

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            //give latitude and long
        var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Bangalore" 
        });

但是当我使用该代码时，我的页面上的地图消失了。我怎样才能让它发挥作用？

Answer 1

你在同一个div上创建了两次地图，这就是为什么它发生的只是改变你的代码，如下所示：

function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
            center: new google.maps.LatLng(12.9583182, 77.6398512),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Bangalore" 
        });

    }
    google.maps.event.addDomListener(window, 'load', initialize);

无需再次添加var map = new google.maps.Map(mapCanvas, mapOptions);次

使用纬度和经度来确定谷歌地图中的位置

1 个答案: