How to update data in Google Maps

Asked

Viewed 97 times

0

I have an app in Ionic that makes use of google maps and displays information registered by the user, through a form. Every time the user reports new data, these new data should appear on the map. My question is the following, how to monitor, change the information displayed in the infowindow content?

HTML form:

<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 the 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;

})

How data is displayed: inserir a descrição da imagem aqui

  • If you use ngMap, it will be very easy! https://ngmap.github.io/

  • @user1576978, very cool, full of options, but for what I want not found. The closest was what I write in a field and appears in the infowindow, but what I write is filled in in a form, before the map appears.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.