Google지도 V3 InfoWindow 오류

간단한 웹 페이지에서 간단한 Google Maps API를 사용합니다. 지도에는 몇 개의 사용자 정의 아이콘이 포함되어 있으며 infoWindow가 설정되어 있습니다. 아이콘을 클릭하여 infoWindow/bubble을 열면지도가 자동 실행되지 않고 정보 풍선에서 X를 클릭해도 닫히지 않습니다.Google지도 V3 InfoWindow 오류

JQuery를 사용하고 있지만 테스트를하지 않았지만 여전히 작동하지 않습니다. 아이콘을 클릭하고 나는 다음과 같은 오류 메시지가 표시 파이어 버그 콘솔에보고 한 후 :

보 내가 설정 한

(범위 42에서 75) 함수

아니다 이 경우 jsFiddle 테스트 케이스가 있지만이 코드는 여기에 포함됩니다. 코드는 컨트롤의 일부이므로 JavaScript가 본문에 포함되어 있습니다.

당신의 이벤트 리스너가 잘못 표시

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function GetMapBubbleContent(id) { 
      return 'content'; 
     } 

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

     function InitializeMap() { 
      var imagesPath = 'http://lh6.ggpht.com/eib8rqN0V8k1Jhnu56cqubkvaEPf_6BXgyEqBPUCj9mHo57xXpMZAMUqr6SPj5b3cUQrqnoNc4Ct3Ps0zRg=s36'; 
      var image = new google.maps.MarkerImage(imagesPath, new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(0, 36)); 
      var shadow = new google.maps.MarkerImage(imagesPath, new google.maps.Size(55, 45), new google.maps.Point(0, 0), new google.maps.Point(0, 45)); 
      var shape = { 
       coord: [0, 0, 36, 0, 36, 36, 0, 36], 
       type: 'poly' 
      }; 
      var image_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(0, 36)); 

      var image_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 20)); 
      var shadow_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(30, 25), new google.maps.Point(0, 0), new google.maps.Point(0, 25)); 
      var shape_small = { 
       coord: [0, 0, 20, 0, 20, 20, 0, 20], 
       type: 'poly' 
      }; 
      var image_small_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 20)); 
      var latlng = new google.maps.LatLng(46.239343, 5.399111); 

      var myOptions = { 
       zoom: 6, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.HYBRID, 
       pancontrol: false, 
       zoomcontrol: true, 
       scalecontrol: true 
      }; 

      infowindow = new google.maps.InfoWindow(); 
      map_plants = new google.maps.Map(document.getElementById("panelMap"), myOptions); 

      var mrk0 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.183909, 10.977222), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test1', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk0, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1218)); 
       infowindow.open(1218, mrk0); 
      }); 
      var mrk1 = new google.maps.Marker({ 
       position: new google.maps.LatLng(45.574806, 11.834682), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test2', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk1, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1131)); 
       infowindow.open(1131, mrk1); 
      }); 
      var mrk2 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.976219, 16.977306), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test3', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk2, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(911)); 
       infowindow.open(911, mrk2); 
      }); 
      var mrk3 = new google.maps.Marker({ 
       position: new google.maps.LatLng(1.000000, 15.000000), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test4', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk3, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1422)); 
       infowindow.open(1422, mrk3); 
      }); 
      var mrk4 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.055114, 9.052830), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test5', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk4, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(687)); 
       infowindow.open(687, mrk4); 
      }); 
     } 

     $(document).ready(function() { 
      InitializeMap(); 
     }); 
    </script> 
    <div id="panelMap" style="height: 600px; width: 600px; overflow: hidden;"> 
</body> 
</html>

출처

2011-06-13 Germstorm

google.maps.event.addListener(mrk1, 'click', function() { 
    infowindow.close(); 
    infowindow.setContent(GetMapBubbleContent(1131)); 
    infowindow.open(1131, mrk1); 
});

는 정보창 열린 행은 다음과 같습니다

infowindow.open(map_plants, mrk1);

열기지도 PARAM을 취 다음 표는이 때문에 일 너의 바이올린에서 나를 위해.

Working fiddle update here.

편집 : 또한, 우리는 당신이 일을 한 적이 참조 면밀한, 상세한 예를 들어 upvote에.

출처

2011-06-13 15:19:39 Khepri

대단히 감사합니다. Khepri. 이것은 실제로 문제였습니다. 마커 코드가 자동으로 생성되었고 자리 표시자가 잘못 배치되었습니다. – Germstorm

Google지도 V3 InfoWindow 오류

답변

관련 문제