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.
