마커로 Google지도 채우기 JSON

Question

마커가있는 Google지도를 채우려고합니다. 각 마커에 대한 정보는 다음 배열에 포함되어 있습니다.

[{"id":"1","name":"toler","lng":"110.33929824829102","lat":"-7.779369982234709","created_at":"2014-02-21 16:19:28","updated_at":"2014-02-21 16:19:28"},{"id":"2","name":"hallo :)","lng":"110.36865234375","lat":"-7.797738383377609","created_at":"2014-02-21 16:19:49","updated_at":"2014-02-21 16:19:49"}] 

그러나 내지도에는 마커가 표시되지 않습니다. 내 자바 스크립트 에서이 코드를 사용하고 있습니다 :

getLocations(); 

function getLocations() { 

    alert('hello'); 
    $.ajax({ 
     type: "GET", 
     url: "http://localhost:8888/public/test", 
     dataType: "jsonp", 
     success: function(json){ 
      $.each(json, function(i, entry){ 
       PlotMarker(json[i].lat, json[i].long); 
      }); 
     }, 
     error: function(err){ 
      console.log(err); 
     } 
    }); 
} 

function PlotMarker(lat, long){ 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat, long), 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP 
    }); 
    markerLocations.push(marker); 
} 

이 문제를 해결할 수있는 방법이 있습니까? 이 URL로 전화하기

http://localhost:8888/public/test 

은 위에 표시된 JSON을 반환합니다.

도움을 주시면 감사하겠습니다.

감사합니다.

편집 :

function initialize() { 

var markers = []; 
var latLng = new google.maps.LatLng(-7.8,110.3666667); 
var map = new google.maps.Map(document.getElementById('map-canvas'), { 
zoom: 13, 
center: latLng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

} 

Answer 1

시도가 변경 :

PlotMarker(entry.location.lat, entry.location.lng);

에 :

PlotMarker(entry.lat, entry.lng);

Answer 2

이 변경 시도 :

를

PlotMarker(entry.location.lat, entry.location.lng); 

는 사람 :

PlotMarker(json[i].lat, json[i].lng); 

나는 때문에 외부 []의의 생각합니다.

Answer 3

외부에 initialize 기능의이 지정됩니다. 그것은 다른 기능을 볼 수있는 유일한 방법입니다 :

var map; 
function initialize() { 
    var markers = []; 
    var latLng = new google.maps.LatLng(-7.8,110.3666667); 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 13, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 

Answer 4

가장 큰 문제는 initialize()가 시작되기 전에 getLocations()라는 점이다. getLocations();을 주석 처리하고 initialize() 기능의 끝으로 이동해야합니다.

충분하지 않습니다. map 정의를 initialize() 함수 외부로 옮겨야하고 initialize() 함수 내부에서 재정의되어서는 안됩니다.

markerLocations은 PlotMarker()에 정의되어 있지 않습니다.

PlotMarker(entry.lat, entry.lng); 

Answer 5

혹시 당신의 초기화 함수를 호출 :

var map; 
var markerLocations = []; 

function initialize() { 
    ... 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 13, 
     center: latLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    ... 
    getLocations(); 
} 

PlotMarker()map 같은 글로벌로 정의해야 하는가처럼 호출 할 수있다? 페이지가로드되면 바로 호출하십시오.

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

도 here으로 표시됩니다.

Answer 6

이러한 기능의 순서는 무엇입니까? 먼저 전화하고 다음에 전화합니까?

이런 종류의 문제가 발생했습니다.지도가 모든 타일을로드하지 않아서 마커를 배치 할 수 없어 나타나지 않습니다. 그러나 콘솔에 체크인하면 마커 객체가 나타납니다.

이것은 내가 그것을 해결하는 방법입니다

google.maps.event.addListener(map, 'tilesloaded', function() { 
    plotMarkers(); 
    google.maps.event.clearListeners(map, 'tilesloaded'); 
}); 

그것은지도 타일이 완전히 마커를하려하기 전에로드됩니다 보장합니다. 이 경우 마커가 반드시 표시됩니다.