javascript - 使用纬度和经度在谷歌地图中精确定位位置

Question

我写了一个脚本来将 map 添加到我的网站。如下:

<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代码:

<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" 
        });   

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

Answer 1

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

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);
第二次