2014-10-20 1 views
0

구글 맵을 사용하여 마커를 그리고 사용자가 마켓을 클릭 할 때 나타나는 작은 팝업 상자를 사용하고 있습니다. 이미지가 첨부되었습니다. 기본적으로 Google은 팝업의 고정 너비를 설정했으며 크기를 변경하려고했습니다. 나는 Documentation에 아무것도 할 수 없었다.이벤트 리스너에서 클로저를 사용할 때 Google지도에 맞춤 크기를 정의하는 방법

다음은 내 코드

 <script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(-14.306407, -170.695018), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      var voyagePlanCoordinates = [    
     new google.maps.LatLng(), 
    ]; 

    var voyagePath<?php echo $voyage_id; ?> = new google.maps.Polyline({ 
     path: voyagePlanCoordinates, 
     geodesic: true, 
     strokeColor: "", 
     strokeOpacity: 1.0, 
     strokeWeight: 5 
    }); 
    voyagePath.setMap(map); 
    setMarkers(map, voyages); 
    } 

    var voyages = []; 

    function setMarkers(map, locations) { 
     var image = { 
     url: '/wp-content/themes/theme/resources/images/marker.png', 
     size: new google.maps.Size(20, 32), 
     origin: new google.maps.Point(0,0), 
     anchor: new google.maps.Point(0, 32) 
     }; 
     for (var i = 0; i < locations.length; i++) { 
     var voyage = locations[i]; 
     var myLatLng = new google.maps.LatLng(voyage[1], voyage[2]); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title: voyage[0], 
      zIndex: voyage[3] 
     }); 
       voyage_msg(marker, i); 
     } 
    } 
      function voyage_msg(marker, num){ 

       var message = []; 
       var infowindow = new google.maps.InfoWindow({ 
        content: message[num] 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(marker.get('map'), marker); 
     }); 
      } 
      google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

있습니다 제발 도와주세요!

enter image description here

+0

[최소, ** 완료 **, 검증 된 및 읽을 수있는 예] (http://stackoverflow.com/help/mcve) – geocodezip

+0

최소 코드 및 곧바로 가리 키도록하십시오. PHP 코드와 같은 대부분의 것들이 제거되었습니다. –

+1

API가 고정 크기를 설정하지 않습니다. 크기는 InfoWindow의 내용과지도의 크기에 따라 다릅니다. CSS를 사용하여 사용자 정의 크기를 적용합니다 (단, API는 항상지도보기 영역에 맞는 InfoWindow를 만들려고합니다). –

답변

1

당신은 팝 오버의 폭을 설정하기 위해 여분의 코드 나 API를 호출이 필요하지 않습니다. 필요한 모든 것은 기본 CSS입니다.

.map-closures{ 
     width: 200px; 
    } 

그 트릭을 수행해야합니다.

+0

감사합니다. –

관련 문제