0

데이터베이스 (API v3 사용)의 Infoboxes를 사용하여 Google지도의 마커에 데이터를 표시하려고합니다. 사실은 Infowindows와 완벽하게 작동하지만 스타일을 지정하고 싶습니다. 이것이 Infobox로 전환 한 이유입니다. 하지만 그들은 Infowindows와 같이 기대했던 것처럼 나타나지 않습니다.Google지도에 Infobox가 표시되지 않습니다.

ViewMap.php

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
<script type="text/javascript"> 
    var infowindow; 
    var map; 
    var infobox; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(6.796396,79.877823); 
    var myOptions = { 
     zoom: 13, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
    var transitLayer = new google.maps.TransitLayer(); 
    transitLayer.setMap(map); 
    downloadUrl("generateXml.php", function(data) { 
     data = xmlParse(data); 
     var markers = data.documentElement.getElementsByTagName("marker"); 
     var bounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < markers.length; i++) { 
     var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     bounds.extend(latlng); 
     var marker = createMarker(markers[i].getAttribute("nom"),markers[i].getAttribute("descripcio"), latlng); 
     } 
     map.fitBounds(bounds); 
    }); 
    } 
    function createMarker(nom,descripcio,latlng) { 
    var marker = new google.maps.Marker({ 
     title:nom, 
     position: latlng, 
     map: map 
    }); 
    infobox = new InfoBox({ 
     content: descripcio, 
     disableAutoPan: false, 
     maxWidth: 150, 
     pixelOffset: new google.maps.Size(-140, 0), 
     zIndex: null, 
     boxStyle: { 
     background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
     opacity: 0.75, 
     width: "280px" 
     }, 
     closeBoxMargin: "12px 4px 2px 2px", 
     closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
     infoBoxClearance: new google.maps.Size(1, 1) 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infobox.open(map, marker); 
     map.panTo(latlng); 
    }); 
    return marker; 
    } 
    function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 
    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
     } 
    }; 
    request.open('GET', url, true); 
    request.send(null); 
    } 
    function doNothing() {} 
</script> 

답변

0

인포 박스가지도-API가 필요합니다, 당신은지도-API를 전에 infobox.js 또한

를로드해야합니다 : 각 마커에 대해 동일한 인포 박스를 사용하는 (글로벌 infobox- 변수에 저장되면이 변수는 createMarker의 각 호출에서 덮어 쓰여 지므로 마지막 마커는 각 마커에 사용 된 InfoBox를 정의합니다).
마지막으로 만든 마커의 descripcio-attribute는 비어 있습니다. 그 이유는 infoboxes에 내용이 없기 때문입니다.

솔루션 :

var infobox = new InfoBox({/*options*/}) 
+0

감사합니다. 이제는 closeBoxURL과 배경 만 보여줍니다. 매개 변수가 제공 한 이름이나 설명을 표시하지 않습니다. – Albert

+0

귀하의 XML을 확인, 귀하의 코드가 제대로 나를 위해 적절한 XML을 작동합니다. –

+0

내 xml 제대로 작동합니다. 여기에서 확인할 수 있습니다 [http://pis.cat] (http://pis.cat/) 그것이 작동하지 않습니다 – Albert

0

이 구글에서이 예제 페이지를 참조하십시오 비공개 정보 상자를 만들기 위해 VAR-키워드를 추가 할 수 있습니다. 이 템플릿을 템플릿으로 사용했는데 효과적입니다. https://developers.google.com/maps/articles/phpsqlajax_v3

+0

글쎄, 나는 스타일을 바꾸기 위해 Infobox를 사용하고 싶었다. infowindow가 어떻게 나타나는지 싫어한다. ( – Albert

관련 문제