Ошибка Google maps Uncaught InvalidValueError: setPosition: не LatLng или LatLngLiteral: в свойствах lat: не число

Question

Я пытаюсь выяснить, почему моя карта google не отображается. Я не создал исходный код. Что вызывает ошибку и мою карту google?

//XXXX: openInfoWindowHtml 
 
/*--------------------------------------------------*/ 
 
/* \t GOOGLE MAP FUNCTIONS 
 
/*--------------------------------------------------*/ 
 

 
var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon; 
 
var infoWindow = new google.maps.InfoWindow(); 
 

 
function initAgentMap(lat, lng) { 
 
\t lat = isNaN(lat) || lat === null ? 37.4419 : lat; 
 
\t lng = isNaN(lng) || lat === null ? -122.1419 : lng; 
 
\t map = new google.maps.Map(document.getElementById("map-canvas"), { 
 
     center : new google.maps.LatLng(lat, lng), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     zoomControlOptions : { 
 
\t   style : google.maps.ZoomControlStyle.SMALL 
 
\t  } 
 
\t }); 
 
\t agentMarkers = []; 
 
\t reoMarkers = []; 
 
\t currentMarker = null; 
 
\t bounds = new google.maps.LatLngBounds(); 
 

 
\t var baseIcon = { 
 
\t  size : new google.maps.Size(29,25), 
 
\t  anchor : new google.maps.Point(15,25), 
 
\t  imageMap : [0, 0, 22, 0, 22, 25, 0, 25] 
 
\t }; 
 

 
\t agentIcon = { 
 
\t  size : baseIcon.size, 
 
\t  anchor : baseIcon.anchor, 
 
\t  imageMap : baseIcon.imageMap, 
 
\t  url : "/images/icon_redbook.png" 
 
    }; 
 

 
\t reoIcon = { 
 
\t  size : baseIcon.size, 
 
\t  anchor : baseIcon.anchor, 
 
\t  imageMap : baseIcon.imageMap, 
 
\t  url : "/images/icon_reo.png" 
 
\t }; 
 

 
\t officeIcon = { 
 
     size : baseIcon.size, 
 
     anchor : baseIcon.anchor, 
 
     imageMap : baseIcon.imageMap, 
 
     url : "/images/icon_office.png" 
 
\t }; 
 
} 
 

 
function plotAgent(lat, long, text, id) { 
 
\t var point = new google.maps.LatLng(lat, long); 
 
\t var marker = new google.maps.Marker({ 
 
\t  position : point, 
 
\t  icon : agentIcon, 
 
\t  anchorPoint : new google.maps.Point(12,0), 
 
\t  map : map 
 
\t }); 
 
\t google.maps.event.addListener(marker, "click", function() { 
 
\t \t infoWindow.setContent(text); 
 
\t \t infoWindow.open(map, marker); 
 
\t }); 
 
\t agentMarkers[id] = marker; 
 
\t bounds.extend(point); 
 
\t return marker; 
 
} 
 

 
function plotREO(lat, long, text, id) { 
 
\t var point = new google.maps.LatLng(lat, long); 
 
\t var marker = new google.maps.Marker({ 
 
\t  position : point, 
 
\t  icon : reoIcon, 
 
\t  anchorPoint : new google.maps.Point(12,0), 
 
\t  map : map 
 
\t }); 
 
\t google.maps.event.addListener(marker, "click", function() { 
 
\t \t infoWindow.setContent(text); 
 
\t \t infoWindow.open(map, marker); 
 
\t }); 
 
\t reoMarkers[id] = marker; 
 
\t bounds.extend(point); 
 
\t return marker; 
 
} 
 

 
function plotOffice(lat, long, text) { 
 
\t var point = new google.maps.LatLng(lat, long); 
 
\t var marker = new google.maps.Marker({ 
 
\t  position : point, 
 
\t  icon : officeIcon, 
 
\t  anchorPoint : new google.maps.Point(12,0), 
 
\t  map : map 
 
\t }); 
 
\t google.maps.event.addListener(marker, "click", function() { 
 
\t \t infoWindow.setContent(text); 
 
\t \t infoWindow.open(map, marker); 
 
\t }); 
 
\t officeMarker = marker; 
 
\t bounds.extend(point); 
 
\t return marker; 
 
} 
 

 
function showAgent(id) { 
 
\t if(currentMarker != id){ 
 
\t \t currentMarker = id; 
 
\t \t google.maps.event.trigger(agentMarkers[id], "click"); 
 
\t \t map.setZoom(11); 
 
\t \t pnt = agentMarkers[id].getPosition(); 
 
\t \t pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng()); 
 
\t \t map.setCenter(pnt2); 
 
\t } 
 

 
} 
 

 
function showREO(id) { 
 
\t if(currentMarker != id){ 
 
\t \t currentMarker = id; 
 
\t \t google.maps.event.trigger(reoMarkers[id], "click"); 
 
\t \t map.setZoom(11); 
 
\t \t pnt = reoMarkers[id].getPosition(); 
 
\t \t pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng()); 
 
\t \t map.setCenter(pnt2); 
 
\t } 
 
} 
 

 
function showOffice() { 
 
\t if(currentMarker != 'office'){ 
 
\t \t currentMarker = 'office'; 
 
\t \t google.maps.event.trigger(officeMarker, "click"); 
 
\t \t map.setZoom(11); 
 
\t \t pnt = officeMarker.getPosition(); 
 
\t \t pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng()); 
 
\t \t map.setCenter(pnt2); 
 
\t } 
 
}

Я пытаюсь выяснить, почему моя карта Google не отображается. Я не создал исходный код. Что вызывает ошибку и мою карту google?

Answer 1

Вы предоставили некоторые случайные функции javascript. Чтобы создать карту, вам понадобится: 1) включить API карт Google. 2) определить местоположение карты на странице html 2) определить размер карты 3) инициализировать карту, после завершения загрузки Windows.

Для удовольствия я продолжал взламывать ваш код, пока он не дал некоторые результаты. Это может дать вам некоторые намеки на то, где вы сбились с пути. Я настоятельно рекомендую прочитать документацию API и примеры воспроизведения. https://developers.google.com/maps/documentation/javascript/examples/map-simple

<html> 
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>   


<style> 
    /* we need to define map size */ 
    #map-canvas {   
     height: 350px; 
     width: 600px;   
    } 
</style>  
<script> 

var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon; 
var infoWindow = new google.maps.InfoWindow(); 

function initialize(){ 
    initAgentMap(37,-122) 
    var marker = plotAgent(37, -122, 'hello world', 1); 
    marker.setMap(map); } 

function initAgentMap(lat, lng) { 
    lat = isNaN(lat) || lat === null ? 37.4419 : lat; 
    lng = isNaN(lng) || lat === null ? -122.1419 : lng; 
    map = new google.maps.Map(document.getElementById("map-canvas"), { 
     center : new google.maps.LatLng(lat, lng), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoomControlOptions : { 
      style : google.maps.ZoomControlStyle.SMALL 
     } 
    }); 
} 

function plotAgent(lat, lng, text, id) { 
    var point = new google.maps.LatLng(lat, lng); 
    var marker = new google.maps.Marker({ 
     position : point, 
     title: text, // Appears on hover 
     label: id, // Latter on marker  
    }); 
    return marker; 
} 

// don't start the process until Windows "load" event is completed 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

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

Answer 2

Единственная проблема, кажется, URL отображений-API, загрузите API из правильного URL (как определено в документации):

<script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?v=3&amp;key=AIzaSyDgNW8A9SvxtI0DazJOJ7x652I2BdhWxdg"></script>