Unique ng-model for forms embedded in info window (Google Maps API)

Question

On every click on the google map, I'm creating a marker and each marker has an info window which contains a form. But the form on all info windows ends up having the same text which isn't what I want. How do I create different forms with different text ?

Here is my code :

Html

 <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)">

Javascript :

 $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;
   }

Image :

Any help is appreciated.

score 0 · Answer 1 · edited May 23 '17 at 12:16

Reading through the documentation, InfoWindow has very limited options if you want to customize it specially setting its content.

I would suggest that you use infobox instead of infowindow.

As mentioned in this GitHub post:

An InfoBox behaves like a google.maps.InfoWindow, but it supports several additional properties for advanced styling.

With more properties as compared with options used in infowindow, styling the contents or the entire window is easier by simply passing a few parameters.

Please check the given GitHub post for sample implementation codes.

Lastly, solutions given in this SO post - Google Maps API v3: Custom styles for infowindow might be of help too.

Unique ng-model for forms embedded in info window (Google Maps API)

1 Answers1