Маркер Google Maps не отображается при инициализации карты

Я новичок в API карт Google. Я знаю, что это, наверное, просто. Код работает по мере необходимости, за исключением того, что я не могу заставить маркер сначала отображать на карте. Маркер ожидает, пока событие клика отобразит маркер. Нужно, чтобы начальный маркер отображался на карте при первой загрузке карты, чтобы ее можно было перетащить.Маркер Google Maps не отображается при инициализации карты

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" charset="utf-8" src="libs/jq.ui.min.js"></script> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,visualization&sensor=false"></script> 


<script> 
var initialLocation; 
var map; 
var marker; 
var latlon; 
var lat; 
var lon; 


    //--------------------------------------------------- 
     getLocation(); 
     //--------------------------------------------------- 
     function getLocation() 
    { 
    if (navigator.geolocation) 
    { 
    var timeoutVal = 10 * 1000 * 1000; 
    navigator.geolocation.getCurrentPosition(initialize,showError, 
    {enableHighAccuracy:true,timeout:timeoutVal,maximumAge:0} 

); 
     lat = position.coords.latitude; 
     lon = position.coords.longitude; 

    } 

    } 

//--------------------------------------------------- 

function initialize() {    
    var myOptions={ 
    center:latlon, 
    zoom:15, 
    zoomControl:true, 
    zoomControlOptions: { 
    style:google.maps.ZoomControlStyle.SMALL 
     }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    };   


     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

       myListener = google.maps.event.addListener(map, 'click', function(event) { 
        placeMarker(event.latLng); 
        google.maps.event.removeListener(myListener); 
        }); 

       google.maps.event.addListener(map, 'drag', function(event) { 
        placeMarker(event.latLng); 
        google.maps.event.removeListener(myListener); 
        }); 




     // Try W3C Geolocation (Preferred) 
      if(navigator.geolocation) { 
       // browserSupportFlag = true; 
       navigator.geolocation.getCurrentPosition(function(position) { 
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
       map.setCenter(initialLocation); 
       }, function() { 
       showError; 
       }); 
       } 

       function placeMarker(location) { 

        marker = new google.maps.Marker({ 
         position: location, 
      icon:'map_icon3.png', 
      animation:google.maps.Animation.DROP, 
         map: map, 
         draggable: true 
        }); 
     marker.setMap(map); 
        map.setCenter(location); 
        var markerPosition = marker.getPosition(); 
        populateInputs(markerPosition); 
        google.maps.event.addListener(marker, "drag", function (mEvent) { 
        populateInputs(mEvent.latLng); 
        }); 
       } 

       function populateInputs(pos) { 
        document.getElementById("t1").value=pos.lat() 
        document.getElementById("t2").value=pos.lng(); 
       } 
      } 


//------------------------------------------------------------------- 
function showError(error) 
    { 
    switch(error.code) 
    { 
    case error.PERMISSION_DENIED: 
     x.innerHTML="User Denied Geolocation" 
     break; 
    case error.POSITION_UNAVAILABLE: 
     x.innerHTML="Location Data Unavailable" 
     break; 
    case error.TIMEOUT: 
     x.innerHTML="Request Timed Out" 
     break; 
    case error.UNKNOWN_ERROR: 
     x.innerHTML="Unknown Error Occurred" 
     break; 
    } 
    } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width: 500px; height: 500px"></div> 
     <input type="text" id="t1" name="t1" /> 
     <input type="text" id="t2" name="t2" /> 
    </body> 
</html>

источник

2013-07-06 user2555505

В каком коде вы пытаетесь отобразить маркер при загрузке страницы? – geocodezip

Убедитесь, что файл изображения, указанный вами под значком при создании маркера, доступен, т. Е. Путь к нему верен.

Я изменил изображение значка на следующее и маркер был виден:

marker = new google.maps.Marker({ 
        position: location, 
        icon:'http://google.com/mapfiles/ms/micons/red.png', 
        animation:google.maps.Animation.DROP, 
        map: map, 
        draggable: true 
       });

я не смог получить позицию через браузер. Он продолжал давать мне ошибку говоря:

position is not defined 
lat = position.coords.latitude;

Чтобы избежать этого я изменил переменную LatLon в myOptions в инициализации функции центра на неподвижной точке.

var latlng = new google.maps.LatLng(19.16981,72.85434);   
var myOptions={ 
center:latlng, 
zoom:15, 
zoomControl:true, 
zoomControlOptions: { 
style:google.maps.ZoomControlStyle.SMALL 
    }, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
};

Слушатель, который вы добавили к этому событию на карте дрэг выдает ошибку, поскольку он не возвращает MouseEvent и, следовательно, никакой позиции не получается. Даже если этот прослушиватель опущен, код все равно будет работать.

Согласно документации v3

https://developers.google.com/maps/documentation/javascript/reference#Map

сопротивление None Это событие несколько раз выстрелил в то время как пользователь перетаскивает карту.

Надеюсь, это поможет вам. Сообщите мне, если это сработает.

источник

2013-07-08 09:42:51 Joyson

Маркер Google Maps не отображается при инициализации карты

ответ

Смежные вопросы