Google Map Markers

[FrancoMeriles]

Hola profe tenemos un problema cuando queremos generar los marcadores con las latitudes y longitudes de los anuncios de la base de datos, fuimos probando este ejemplo con array y funciona bien

var cities = [
                      {
                          city : 'Location 1',
                          desc : 'Test',
                          lat : -31.375187,
                          long : -64.238303
                      },
                      {
                          city : 'Location 2',
                          desc : 'Test',
                          lat : -31.378288,
                          long : -64.235963
                      },
                      {
                          city : 'Location 3',
                          desc : 'Test',
                          lat : -31.379360,
                          long : -64.238925
                      },
                      {
                          city : 'Location 4',
                          desc : 'Test',
                          lat : -31.379653,
                          long : -64.240620
                      }
                  ];

  $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();
        var createMarker = function (info){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(info.lat, info.long),
                map: $scope.map,
                animation: google.maps.Animation.DROP,
                title: info.city
            });
            marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
            google.maps.event.addListener(marker, 'click', function(){
                infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                infoWindow.open($scope.map, marker);
            });
            $scope.markers.push(marker);
        }
        var i = 0;
        for (i = 0; i < cities.length; i++){
            createMarker(cities[i]);

}

Y muestra asi

Entonces probamos con la base de datos que le agregamos lat y long y las cordenadas, no muestra nada y en la consola no tira ningun error, en la base de datos tuvimos que poner varchar a latitud y longitud xq no aceptaba el punto cuando poniamos la cordenada, puede ser eso?

// Get Anuncios
  $scope.anuncios = [];
           $http.get('http://api-geoalquiler.herokuapp.com/index.php/anuncios').then(function(resp) {
             $scope.anuncios = resp.data.data;
             console.log('Succes Anuncios', resp.data.data);
           }, function(err) {
             console.error('ERR', err);
             // err.status will contain the status code
           });

// Marcadores

          $scope.markers = [];
          var infoWindow = new google.maps.InfoWindow();

          var createMarker = function (info){
              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(info.latitud, info.longitud),
                  map: $scope.map,
                  animation: google.maps.Animation.DROP,
                  title: info.titulo
              });
              marker.content = '<div class="infoWindowContent">' + info.descripcion + '</div>';
              google.maps.event.addListener(marker, 'click', function(){
                  infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                  infoWindow.open($scope.map, marker);
              });
              $scope.markers.push(marker);
          }
          var i = 0;
          for (i = 0; i < $scope.anuncios.length; i++){
              createMarker($scope.anuncios[i]);
          }

[fedemiguez]

fijate en la api cuando los devuelve a las cordenadas no las trae como enteros sino como un string

[catrielmuller]

Pudieron solucionarlo, Pueden usar parseFloat ( http://www.w3schools.com/jsref/jsref_parsefloat.asp ) para pasar de Sting a Float.

[FrancoMeriles]

Sigue sin mostrar nada, use parseFloat y seria algo asi probe parseFloat(info.latitud), parseFloat("info.latitud") y parseFloat('info.latitud') mismo resultado

  $scope.markers = [];
          var infoWindow = new google.maps.InfoWindow();

          var createMarker = function (info){
            var lat = parseFloat(info.latitud);
            var long = parseFloat(info.longitud);
              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(lat, long),
                  map: $scope.map,
                  animation: google.maps.Animation.DROP,
                  title: info.titulo
              });
              marker.content = '<div class="infoWindowContent">' + info.descripcion + '</div>';
              google.maps.event.addListener(marker, 'click', function(){
                  infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                  infoWindow.open($scope.map, marker);
              });
              $scope.markers.push(marker);
          }
          var i = 0;
          for (i = 0; i < $scope.anuncios.length; i++){
              createMarker($scope.anuncios[i]);
          }

Entonces el problema es que puse en varchar el campo de la tabla? o es algo del codigo? no puedo poner en otro metodo que me guarde como numerico pero que acepte el - y el . ??

[catrielmuller]

Franco, Tienes que usar el tipo Float para guardar los numeros positivos o negativos con coma.

[catrielmuller]

.controller('GooglemapCtrl', function($scope, $ionicLoading, $http) {
  // Set Header
  $scope.$parent.showHeader();
  $scope.$parent.clearFabs();
  $scope.isExpanded = false;
  $scope.$parent.setExpanded(false);
  $scope.$parent.setHeaderFab(false);

  console.log("GooglemapCtrl");
    $scope.initialise = function() {
      console.log("In Google.maps.event.addDomListener");
      var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
      var mapOptions = {
      center: myLatlng,
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    console.log(mapOptions);
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    navigator.geolocation.getCurrentPosition(function(pos) {
        console.log(pos);
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
              position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
              map: map,
              title: "My Location",
              icon: 'http://i.stack.imgur.com/EVb1C.png'
        });
    });

    $scope.map = map;

    $scope.anuncios = [];
    $http.get('http://api-geoalquiler.herokuapp.com/index.php/anuncios').then(function(resp) {
      $scope.anuncios = resp.data.data;
      $scope.popMap();
    }, function(err) {
      console.error('ERR', err);
      // err.status will contain the status code
    });

    $scope.popMap = function() {
      for (var i = $scope.anuncios.length - 1; i >= 0; i--) {

        $scope.anuncios[i].marker = new google.maps.Marker({
          position: new google.maps.LatLng(parseFloat($scope.anuncios[i].latitud), parseFloat($scope.anuncios[i].longitud)),
          map: $scope.map,
          animation: google.maps.Animation.DROP,
          title: $scope.anuncios[i].titulo
        });

      };
    };

  };
  google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
});