Google지도 API V3 마커

Question

Google지도에 문제가 있습니다. 일부 위치에 마커를 넣을 수 없습니다. 내 생각은 내 위치를 찾아 표식을 붙인 다음 다른 위치에 표식을 붙이는 것이지만 다른 위치의 표식은지도에 표시되지 않았습니다. 내가 중심 정적 값을 사용이 당신에 따라 변경할 수 있습니다 :

function success(position) { 
     var mapcanvas = document.createElement('div'); 
     mapcanvas.id = 'mapcontainer'; 
     mapcanvas.style.height = '550px'; 
     mapcanvas.style.width = '960px'; 

     document.querySelector('article').appendChild(mapcanvas); 

     var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     var options = { 
      zoom: 15, 
      center: coords, 
      mapTypeControl: false, 
      navigationControlOptions: { 
       style: google.maps.NavigationControlStyle.SMALL 
      }, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

     var marker = new google.maps.Marker({ 
      position: coords, 
      map: map, 
      title: "Vasa lokacija" 
     }); 
    } 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success); 
    } else { 
     error('Geo Location is not supported'); 
    } 
    var locations = [ 
     ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4], 
     ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5], 
     ['Zenica', 44.203439200000000000, 17.907743200000027000, 3], 
     ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2], 
     ['Mostar', 43.333333300000000000, 17.799999999999954000, 1] 
    ]; 
    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
    } 

Answer 1

코드와 주요 문제는 함수 success .try의 측면이 밖으로이기 때문에지도가로드되기 전에 마커를하려하는 것입니다 당신의 코드.

$(document).ready(function() { 
    success(position); 
}); 

var position = { // suppose this is your position 
    coords: { 
     latitude: 44.666666699999990000, 
     longitude: 17.183333299999960000 
    } 
}; 

var map; 
var marker, i; 

var locations = [ 
    ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4], 
    ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5], 
    ['Zenica', 44.203439200000000000, 17.907743200000027000, 3], 
    ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2], 
    ['Mostar', 43.333333300000000000, 17.799999999999954000, 1] 
]; 

function success(position) { 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '550px'; 
    mapcanvas.style.width = '960px'; 
    document.getElementById('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

    var options = { 
     zoom: 8, 
     center: coords, 
     mapTypeControl: false, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     title: "Vasa lokacija" 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', function (marker, i) { 

      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 

     }); 
    } 
} 

Answer 2

마커 추가 루프는 마커 추가 루프가 성공 함수 밖에 있으므로 절대로 호출되지 않습니다. 또한 코드 끝에 여분의 }이 있습니다. 여기에 전체 솔루션 jsfiddle

var map; 

function success(position) { 

    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '550px'; 
    mapcanvas.style.width = '960px'; 

    document.querySelector('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

    var options = { 
     zoom: 15, 
     center: coords, 
     mapTypeControl: false, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    var marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     title: "Vasa lokacija" 
    }); 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success); 
    } else { 
     error('Geo Location is not supported'); 
    } 

    var locations = [ 
     ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4], 
     ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5], 
     ['Zenica', 44.203439200000000000, 17.907743200000027000, 3], 
     ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2], 
     ['Mostar', 43.333333300000000000, 17.799999999999954000, 1] 
    ]; 

    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 

} //success fn ENDS 

var position = { 
    coords: { 
     latitude: 44.766666699999990000, 
     longitude: 17.183333299999960000 
    } 
}; 

success(position);