使用經度和緯度在Google地圖中定位位置

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