구글맵 API error 관련


안녕하세요. 구글맵 API를 이용하여 웹사이트를 제작하고있습니다. 다름이아 아니라 구글맵 key를 가져와 웹사이트에 출력을 하였는데, 무리없이 잘되기는 하나 icon생성에 문제가 된다고 error메세지가 뜹니다... 왜 이문제가 생기는지 도저히 몰라 이렇게 질문을 올리게 됩니다. 이미지

//var mapLocation = new google.maps.LatLng('33.381066', '126.536004'); // 지도에서 가운데로 위치할 위도와 경도
 16          
 17         var mapOptions = {
 15         var mapLocation = new google.maps.LatLng('33.381066', '126.536004'); // 지도에서 가운데로 위치할 위도와 경도
 16          
 17         var mapOptions = {
 18           center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
 19           zoom: 10, // 지도 zoom단계
 20           mapTypeId: google.maps.MapTypeId.ROADMAP
 21         };
 22         var map = new google.maps.Map(document.getElementById("map-canvas"), // id: map-canvas, body에 있는 div태그의 id와 같아야 함
 23             mapOptions);
 24          
 25         var size_x = 30; // 마커로 사용할 이미지의 가로 크기
 26         var size_y = 30; // 마커로 사용할 이미지의 세로 크기
 27          
 28         // 마커로 사용할 이미지 주소
 29         var image = new google.maps.MarkerImage( 'http://www.larva.re.kr/home/img/boximage3.png',
 30                             new google.maps.Size(size_x, size_y),
 31                             '',
 32                             '',
 33                             new google.maps.Size(size_x, size_y));
 34 
 35         var restaurants = [] 
 36         <% @restaurants.each do |r| %>
 37           restaurants.push(["<%=r.name%>","<%=r.latitude%>","<%=r.longitude%>"])
 38         <% end %>
 39         
 40         var marker,i;
 41         var infowindow = new google.maps.InfoWindow();
 42 
 43         for(i=0;i<restaurants.length;i++){
 44           marker = new google.maps.Marker({
 45                position: new google.maps.LatLng(restaurants[i][1],restaurants[i][2]), 
 46                map: map,
 47                icon: image, // 마커로 사용할 이미지(변수)
 48                title: restaurants[i][0] // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
 49           });

조회수 80


1 답변


// 마커로 사용할 이미지 주소
 var image = new google.maps.MarkerImage( 'http://www.larva.re.kr/home/img/boximage3.png',
   new google.maps.Size(size_x, size_y),
     new google.maps.Point(0, 0),
     new google.maps.Point(0, 0),
   new google.maps.Size(size_x, size_y));

혹은

var image = {
  url: 'http://www.larva.re.kr/home/img/boximage3.png',
  size:   new google.maps.Size(size_x, size_y),
  origin: new google.maps.Point(0, 0),
  anchor: google.maps.Point(0, 0),
  scaledSize:  google.maps.Size(size_x, size_y)
};

이렇게 수정해보세요.

  • 2016년 11월 23일에 작성됨
    프론트앤드, 임베디드 초보개발자입니다

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close