I have an Ionic app that makes use of google maps and displays information registered by the user through a form. Every time the user enters new data, these new data must appear on the map. My question is, how to monitor, change the information displayed in the infowindow content?
Form HTML:
<ion-view title="Denúncia" hide-back-button="false">
<ion-content overflow-scroll="true" padding="true" class="has-header">
<form class="list">
<div ng-controller="denResCtrl">
<label class="item item-input">
<div class="input-label">
Nº do endereço
</div>
<input type="text" ng-model="denuncia.numeroEndereco">
</label>
<label class="item item-input">
<div class="input-label">
Data
</div>
<input type="date" ng-model="denuncia.dataDenun">
</label>
<label class="item item-input">
<div class="input-label">
Hora
</div>
<input type="text" placeholder="23:00" ng-model="denuncia.horaDenun">
</label>
<label class="item item-input item-select">
Tipo
<select name="tipo" ng-model="denuncia.tipoDenun">
<option value="" selected>Selecionar</option>
<option value="Furto" selected>Furto</option>
<option value="Roubo">Roubo</option>
<option value="Sequestro">Sequestro</option>
<option value="Arrombamento veicular">Arrombamento veicular</option>
<option value="Tentativa de assalto">Tentativa de assalto</option>
<option value="Arrombamento">Arrombamento</option>
<option value="Roubo de veiculo">Roubo de veículo</option>
</select>
</label>
<div class="input-label">
Breve descrição
</div>
<label class="item item-input">
<textarea ng-model="denuncia.descricao" rows="5" cols="5"></textarea>
</label>
<button class="button button-block button-positive" ng-click="fazerDenuncia(denuncia)">Denunciar</button>
</div>
</form>
</ion-content>
</ion-view>
Controller that displays map and form information
.controller('MapaResCtrl', function($scope, $rootScope) {
$rootScope.diaDenun;
$rootScope.hora;
$rootScope.tipo;
$rootScope.des;
$rootScope.coordenadas;
var mapOptions = {
//center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$rootScope.myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location",
});
var infowindow = new google.maps.InfoWindow({
content: "Dia da denúncia "+$rootScope.diaDenun+" Hora: "+$rootScope.hora+" Tipo: "+$rootScope.tipo+" Descrição: "+$rootScope.des
});
infowindow.open(map,$rootScope.myLocation);
});
$scope.map = map;
})