Google지도 핀 API v3

API를 사용하여 내 웹 사이트에로드하는 Google지도가 있습니다. 내가 원하는대로 스타일을 지정했지만 내 맵의 특정 위치에 맞춤 이미지가 포함 된 핀을 추가해야합니다. 센터 코디네이터는 내가 핀을 위해 사용하고자하는 것과 다릅니다. Google api docs에 제공된 코드를 사용해 보았지만 제대로 작동하지 않는 것 같습니다. 아래 코드는 작동하지 않을 때 핀 코드없이 사용하고있는 코드입니다.Google지도 핀 API v3

'pin.png'

과 좌표 : 누군가라는 이미지 파일 작업 핀 얻기 위해 추가하는 걸 말할 수 있을까 여기

51.4531807,-2.1864739,17

나의 현재 JS

   // When the window has finished loading create our google map below 
     google.maps.event.addDomListener(window, 'load', init); 

     function init() { 
      var map = new google.maps.Map(mapElement, mapOptions); 
      var office = new google.maps.LatLng(51.4477764,-2.2015512); 
var marker = new google.maps.Marker({ 
    position: office, 
    map: map 
}); 
      // Basic options for a simple Google Map 
      // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions 
      var mapOptions = { 
       // How zoomed in you want the map to start at (always required) 
       zoom: 17, 

       // The latitude and longitude to center the map (always required) 
       center: new google.maps.LatLng(51.4476895, -2.2057354), // New York 

       draggable: false, 
       zoomControl: false, 
        scrollwheel: false, 
        disableDoubleClickZoom: true, 
        streetViewControl: false, 
        disableDefaultUI: true, 

       // How you would like to style the map. 
       // This is where you would paste any style found on Snazzy Maps. 
       styles: [ {  featureType:'water',  elementType:'all',  stylers:[   {hue:'#bbbbbb'},   {saturation:-100},   {lightness:-4},   {visibility:'on'}  ] },{  featureType:'landscape',  elementType:'all',  stylers:[   {hue:'#999999'},   {saturation:-100},   {lightness:-33},   {visibility:'on'}  ] },{  featureType:'road',  elementType:'all',  stylers:[   {hue:'#999999'},   {saturation:-100},   {lightness:-6},   {visibility:'on'}  ] },{  featureType:'poi',  elementType:'all',  stylers:[   {hue:'#aaaaaa'},   {saturation:-100},   {lightness:-15},   {visibility:'on'}  ] },{ 
featureType: 'poi.business', 
elementType: 'labels', 
stylers: [ 
    { visibility: 'off' } 
] 
}] 
      }; 



      // Get the HTML DOM element that will contain your map 
      // We are using a div with id="map" seen below in the <body> 
      var mapElement = document.getElementById('map'); 

      // Create the Google Map using out element and options defined above 

     }

입니다

출처

2014-07-16 BHWD

지도에 핀을 그리고 핀을 그려야하는 코드를 제외하고 모든 것을 게시하려고합니다. –

나는 이것을 지금 추가했다. 죄송합니다. – BHWD

마커의 코드를'init()'의 끝으로 옮깁니다. (현재'map'이 접근 할 수없는 곳에 있습니다.) –

지도에 핀을 표시하는 코드는 정확했지만지도에 액세스 할 수있는 곳 밖에있었습니다. 나는 이미지에 대한 직접 링크와 아이콘을 사용하는 사용자 정의 핀을 표시하려면

var mapElement = document.getElementById('map'); 


      var map = new google.maps.Map(mapElement, mapOptions); 
      var hadston = new google.maps.LatLng(51.4477764,-2.2015512); 
var marker = new google.maps.Marker({ 
    position: hadston, 
    map: map, 
clickable: false, 
    icon: 'pin.png' 
    }); 
     }

Dr.Molle @로 표시되는 코드는지도 후 넣어했다이 문제를 해결하고 닫는 대괄호 전합니다.

icon: 'pin.png'

출처

2014-07-17 12:06:51 BHWD

Google지도 핀 API v3

답변

관련 문제