$(document).ready(function () {
$(document).foundation();
});
function init() {
var map;
var styles =
[
{
stylers: [
{ hue: «#330» },
{ saturation: –20 }
]
},{
featureType: «road»,
elementType: «geometry»,
},{
featureType: «road»,
elementType: «labels»,
stylers: [
{ visibility: «on» }
]
}
];
map = new google.maps.Map(document.getElementById(«map_canvas»), {
center: new google.maps.LatLng(40.674389,–4.700432),
zoom: 5
});
map.setOptions({styles: styles});
var input = document.getElementById(‘searchTextField’);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo(‘bounds’, map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, ‘place_changed’, function() {
infowindow.close();
marker.setVisible(false);
input.className = »;
//place contiene muchos objectos con muchisima información de la localizacion escogida
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = ‘notfound’;
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
//descomenta console.log y ojea la consola, veras toda la información disponible
//console.log(place)
//hacemos que en el infowindow aparezca la dirección tipo
//Carrer Bonaventura Calopa, 08830 Sant Boi de Llobregat, Barcelona, España
infowindow.setContent(‘<div><strong>’ + place.formatted_address + ‘</strong></div>’);
infowindow.open(map, marker);
document.formElem.lat.value=place.geometry.location.ob;
document.formElem.lng.value=place.geometry.location.pb;
document.formElem.direccion.value=place.formatted_address;
});
}
google.maps.event.addDomListener(window, ‘load’, init);
|
Ahora si que podemos acceder al formulario y lo debemos ver perfectamente, el problema es el mismo que antes, que no funciona porque falta el archivo que se encarga de procesarlo, así que creamos un nuevo archivo en la raíz del proyecto llamado save_store.php y dentro colocamos el siguiente código.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?php
//comprobamos que vengan alguna variable por post
if(isset($_POST[«lat»]) && !empty($_POST[«lat»]))
{
//creamos un nuevo objeto gmaps
require_once(«clases/gmaps.class.php»);
$gmaps = new Gmaps();
//obtenemos variables via post
$nombre = isset($_POST[«nombre»]) ? $_POST[«nombre»] : «»;
$direccion = isset($_POST[«direccion»]) ? $_POST[«direccion»] : «»;
$lat = $_POST[«lat»];
$lng = isset($_POST[«lng»]) ? $_POST[«lng»] : «»;
$tipo_comercio = isset($_POST[«tipo_comercio»]) ? $_POST[«tipo_comercio»] : «»;
$descripcion = isset($_POST[«descripcion»]) ? $_POST[«descripcion»] : «»;
//si se guarda la información correctamente redirigimos de nuevo al formulario
if($gmaps->save_store($nombre,$direccion,$lat,$lng,$tipo_comercio,$descripcion) == true)
{
header(«Location: http://localhost/gmapsphp/add_store.php?save=success»);
}else{
//en otro caso hacer otra cosa, de momento sólo imprimimos error en pantalla
echo «error»;
}
}else{
throw new Exception(«Error Processing Request», 1);
}
|
Como vemos, simplemente recogemos los datos del formulario y los enviamos al método save_store de nuestra clase gmaps, lo único que deberíais validar que los campos no vengan vacíos.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
buenas tardes, me puedes proporcionar el código.
y una pregunta, como seria implementado de 2 puntos diferente, es
decir partí del punto A hasta llegar punto B.
Hola buen día, escribeme gguerrero@tecgurus.net
saludos