entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

4votos

Hola buenas tardes, estoy tratando de recibir variables (coordenadas) en una pagina php y mandarlas a js donde tengo el código de google maps para hacer radios y poner marcas en el mapa. trate de declararlas en php y después usarlas en js pero simplemente no despliega el mapa, ahora coloque dos inputs de tipo text tanto como de tipo number y después llas recupere en js para usarlas como coordenadas, de este modo si despliega el mapa pero no pone la marca en el mapa. Lo único que he podido hacer es declararlas dentro de js y usarlas, de este modo si muestra la marca, no se si exista algo como $_Get o $_POST en js para olvidarme del php y obtenerlas directas o si estoy usandolas mal al momento de ponerlas como coordenadas

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>html,body{height:100%;margin:0;padding:0;}#map{height:90%;}</style>
  </head>
  <body>
    <div id="map"></div>
    <?php
    $lat = 19.50448;//LAS ASIGNO DIRECTAMENTE DESDE VARIABLES EN PHP (NO ME FUNCIONO)
    $lon = -99.17813;
    //$lat = $_REQUEST["lat"];
    //$lon = $_REQUEST["lon"];
    echo "<input type='number' id='latitud' value=19.503409  class='form-control' onchange='initMap()'>";//LE ASIGNO LOS VALORES AL INPUT
                                                                                                         //(NO FUNCIONA) 
    echo "<input type='number' id='longitud' value=-99.179911  class='form-control' onchange='initMap()'>";
    ?>
    <script>

// This example creates circles on the map, representing populations in North
// America.
// First, create an object containing LatLng and population for each city.

function initMap() {

   var latitud = document.getElementById("latitud").value;//AQUI LAS ESTOY RECUPERANDO DESDE EL INPUT
    var longitud = document.getElementById("longitud").value; 

    var la=19.503409;//DECLARO LAS VARIABLES DIRECTAMENTE EN JS(DE ESTA FORMA SI FUNCIONA)
    var lo= -99.179911;

    var citymap = {
  tecnoparque:{
    center:{lat: 19.504247, lng: -99.178332},
    population: 5
  },
  buildD:{
      center:{lat: 19.504627, lng: -99.177847},
      population: .4
  },
  buildE:{
      center:{lat: 19.503530, lng: -99.177258},
      population: .4
  },
  XD:{
      center:{lat:  19.50448, lng:  -99.17813},
      population: .01
  }

};

  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 19.982590, lng: -99.914485},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  var infoWindow = new google.maps.InfoWindow({map: map});
  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found ALAN.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}
  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
  // The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;
alert(latitud);
    alert(longitud);

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 19.504627, lng: -99.177847}
  });
    marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 19.503530, lng: -99.177258}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: la , lng: lo } //DE ESTA FORMA SI ME DEJA PONER LA MARCA
    });
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
}

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>
  </body>
</html>

Nota: edito para ocultar el API KEY de Google Maps.

1voto

morgooth comentado

No entiendo muy bien lo que necesitas, quiere tomar tu ubicación actual o quieres tomar distintos puntos desde una bd por ejemplo ?

Quedo atento, saludos.

1voto

x4mp73r comentado

Amigo si solo son dudas de la pregunta es mejor hacerles comentarios y no postearlas como respuesta :)

1voto

morgooth comentado

fue sin querer c:

2votos

carlossevi comentado

¿Siempre lo vas a tener todo (PHP, conexión a base de datos, estilos, html...) en un mismo archivo? Es muy poco recomendable, pero si es para una demo puedes hacer que PHP genere dinámicamente la parte del script que te interesa.

En caso de que lo quieras "hacer bien" tendrás que establecer una comunicación entre el script de Javascript (lado del cliente) y el script de PHP (lado del servidor), por ejemplo mediante una petición que devuelva la lista de markers.

Está página está llena de ejemplos:
http://entredesarrolladores.com/search?q=javascript+php

1voto

alanSG12 comentado

Hola, mira estoy haciendo una app en unity en lenguaje C# con un gps el cual va a mandar mi ubicación el php debe cachar esos datos del gps y hacer comunicacion con el codigo que tengo en js para que vea que se encuentra en un radio que yo especifico con la api de google, lo que me gustaria hacer es que las cache en el php y pasar esas variables a js pero no las lee y no despliega el mapa.
Lamento si soy confuso o no me exprese bien en mi pregunta, la verdad es la primera vez que posteo algo y también soy nuevo en js

2 Respuestas

2votos

alanSG12 Puntos310

Hola, ya pude resolver mi problema, les comparto la solución por si alguno lo quiere intentar en un futuro, cuando nosotros obtenemos las variables en js al parecer las estamos obteniendo con un tipo de variable de texto, así que lo que se debe hacer para poder usar estas variables como coordenadas es que al asignarlas a una variable en js incluir el parseFloat('');. Ejemplo:

var la= parseFloat('<?php echo $lat; ?>')

Con esto ya muestra el marker en el mapa atraves de las variables la y lo que estoy usando yo en mi código les comparto abajo el código js:

<script>
// This example creates circles on the map, representing populations in North
// America.
// First, create an object containing LatLng and population for each city.

function initMap() {
var la= parseFloat('<?php echo $lat;?>');
var lo= parseFloat('<?php echo $lon;?>');

    var citymap = {
  tecnoparque:{
    center:{lat: 19.504247, lng: -99.178332},
    population: 5
  },
  buildD:{
      center:{lat: 19.504627, lng: -99.177847},
      population: .4
  },
  buildE:{
      center:{lat: 19.503530, lng: -99.177258},
      population: .4
  },
  XD:{
      center:{lat:  19.50448, lng:  -99.17813},
      population: .01
  }

};

  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 19.500209, lng: -99.182022},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  var infoWindow = new google.maps.InfoWindow({map: map});
  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found ALAN.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}
  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
  // The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;
alert(la);
alert(lo);

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 19.504627, lng: -99.177847}
  });
    marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 19.503530, lng: -99.177258}
  });  
  marker3 = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: la , lng: lo }
    });
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
}

</script>

0voto

Peter comentado

Gracias por compartir la solución.

3votos

morgooth Puntos2340

tome tu código y descomente lo que tenias y agregue algunas cosas y si me muestra el mapa.

Le envié los datos por get.

http://localhost/map.php?lat=19.50444&lon=-99.17814

Si tienes el error muestra cual es.

// ...
 //$lat = 19.50448;//LAS ASIGNO DIRECTAMENTE DESDE VARIABLES EN PHP (NO ME FUNCIONO)
 //$lon = -99.17813;
 $lat = $_REQUEST["lat"];
 $lon = $_REQUEST["lon"];

$console = "<script>console.log($lat+' '+$lon);</script>";
echo $console; //solo para verificar
?>
    <script>

function initMap() {

   var latitud = document.getElementById("latitud").value; 
   var longitud = document.getElementById("longitud").value; 

   var la=parseFloat(latitud);
   var lo= parseFloat(longitud);

  //si quiere tomar la variable php desde JS sin usar ese input lo puedes hacer así:

   var phpInJS = "<?php echo " $lat   ";?>";

  alert("phpInJS "+phpInJS );

0voto

alanSG12 comentado

Hola si puedo utilizar las variables para alert's o echo's pero cuando lo quiero utilizar como coordenada no muestra el amrker dentro de el mapa, no se si tu lo intentaste

var marker;
alert(la);
alert(lo);

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 19.504627, lng: -99.177847}
  });
    marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 19.503530, lng: -99.177258}
  });  
  marker3 = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: la , lng: lo }
    });

Yo las estoy guardando como "la" y "lo". para utilizarlas posteriormente en el marker en la altitud y longitud, creo que el problema es que no las esta reconociendo como enteros si no como texto.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta