정보창에 포함 된 양식의 고유 한 모델 (Google지도 API)

Question

Google지도를 클릭 할 때마다 마커를 만들고 각 마커에는 양식이 포함 된 정보 창이 있습니다. 그러나 모든 정보창의 양식은 내가 원한 것이 아닌 동일한 텍스트를 가지고 끝납니다. 다른 텍스트로 다른 양식을 만드는 방법은 무엇입니까?

<ng-map center="[40.74, -74.18]" map-type-control-options="{style:'HORIZONTAL_BAR', position:'BOTTOM_CENTER'}" zoom="3" style="height:30em;" on-click="addNewMarker(event)"> 

자바 스크립트

HTML : :

$scope.all_forms = []; 
$scope.addNewMarker = function(e) 
{ 
    var form = '<div id="form_canvasform" >' + 
        '<form name="form_canvas">' + 
        '<textarea class="form-control" required placeholder="Your Text..." ng-model="mk[$scope.all_forms.length].text">{{all_forms}}</textarea><br/>' + 
        '<button class="btn btn-default" ng-click="uploadNewImageMap()" ng-model="mkimage" id="markerJs">Upload Image</button>' + 
        '<button class="btn btn-default" ng-click="uploadNewVideoMap()" ng-model="mkvideo" id="markerJs3">Upload Video</button><br/>' + 
        '</form>' + 
       '</div>'; 

    var form_compiled = $compile(form)($scope); 

    $scope.all_forms.push(form_compiled); 


    all_infoWindow[markerCounter] = new google.maps.InfoWindow({content:$scope.all_forms[$scope.markerCounter][0]}); 
    all_markers[markerCounter] = new google.maps.Marker({position: e.latLng, map: map, draggable:true}); 

    infoWindow.open(map,marker); // not infoWindow.open(app,marker); 

    google.maps.event.addListener(infoWindow,'closeclick',function(){ 
     marker.setMap(null); 
    }); 

    google.maps.event.addListener(marker, 'position_changed', function() { 
     if(infoWindow.getMap()){ 
      infoWindow.open(map,this); 
     } 
     }); 
     $scope.markerCounter += 1; 
    } 

이미지 :

모든 여기

내 코드입니다 도움을 주시면 감사하겠습니다.

Answer 1

InfoWindow은 특별히 콘텐츠를 맞춤 설정하려는 경우 매우 제한된 옵션이 있습니다.

infowindow 대신 infobox을 사용하는 것이 좋습니다.

인포 박스는 google.maps.InfoWindow처럼 동작하지만, 고급 스타일에 대한 몇 가지 추가 속성을 지원합니다 :이 GitHub 포스트에서 언급 한 바와 같이

.

infowindow에 사용 된 옵션보다 속성이 많으므로 몇 가지 매개 변수를 전달하기 만하면 콘텐츠 또는 전체 창을 스타일링하는 것이 더 쉽습니다.

예제 구현 코드는 GitHub post을 확인하십시오.

마지막으로이 게시물에 주어진 해결책은 Google Maps API v3: Custom styles for infowindow 일 수 있습니다.