Google지도에서 상대 파일 경로를 사용하여 맞춤 마커 표시

Question

웹 앱을 개발하는 데 Google의 Javascript APi v.3.0을 사용하고 있습니다. 맞춤 마커를 표시하고 싶지만 추가하려고하면 나타나지 않습니다. 나는 사용자 정의 마커를 표시하기 위해 자바 스크립트 도우미 함수를 작성했습니다 :

function addCustomMarker(iconFile,iconTitle,lat,lng){ 
    var loc = new google.maps.LatLng(lat,lng); 
    var marker = new google.maps.Marker({ 
     position:loc, 
     icon:iconFile, 
     title: iconTitle, 
     zIndex:2 
    }); 
    marker.setMap(map);//Where map is a google.maps.Map already defined 
} 

나는 현재 로컬에서 테스트하고 있습니다를 내 파일 구조는 일종의 같이 보인다 :

• /지도 응용 프로그램
  • map.htm
  • /이미지
    • markerImage.png

다른 곳 HTML 파일에서, 나는 다음과 같은 자바 스크립트 함수를 호출 : 그러나

addCustomMarker('Images/markerImage.png', 'Custom Marker', 20, 50); 

을이 작동하지 않습니다. 마커가 표시되지 않습니다. "icon : markerIcon,"행을 주석 처리하면 이미지 파일을 찾을 수 없다는 기본 마커가 표시됩니다.

상대 경로에서 마커 이미지를 참조하는 방법이 있습니까? 나는 './Images/markerImage.png'및 '/Images/markerImage.png'도 시도했지만 어느 것도 작동하지 않습니다.

Answer 1

예, 또한 상대 경로가 작동한다고 생각합니다. 내가 로컬로 시도하고 잘 작동합니다. 나는 icon:이 src의 img 태그 또는 그와 비슷한 것을 넣을 뿐이라고 믿습니다.

var marker = new google.maps.Marker({map: map, 
    position: new google.maps.LatLng(0,0), 
    icon: "icons/ride_red.png"}); 

icons는 자바 스크립트/HTML 파일이 같은 폴더에 폴더 :

은 여기 내 예입니다.

대문자를 올바르게 입력 했습니까? 당신이 노력하면 icon 옵션을 "하드 코딩"무엇, 즉 :

icon: 'Images/markerImage.png', 

지금 여기 바보 같은 질문 : 당신은 또한 당신의 브라우저에서 그 markerImage.png을 여는 시도?

상대적인 아이콘 경로가있는 here's a page 로컬 페이지 옆. "Metro SP Stations"확인란을 선택하여 아이콘을 표시합니다. 당신이 소스를 보면,

 estacao = new google.maps.Marker({ 
     map: map, 
     position: toLatLng(estacao_data.posn[0], estacao_data.posn[1]), 
     icon: 'metrosp/' + estacao_data.icon[0] + '.png', 
     title: estacao_data.name, 
     visible: false 
     }); 

그런 다음 당신은 metrosp 폴더로 이동 한 이미지를 모두가 볼 수

내가 최근에 쓴 작은 프로토 타입에서

https://files.nyu.edu/hc742/public/googlemaps/metrosp/

Answer 2

아니요, 이미지의 상대 주소를 사용할 수 없습니다. 핀은 다른 서버의 페이지에 표시되므로 전체 주소를 사용해야합니다.