Diferencia entre revisiones de «Obtener puntos en google maps»
(Página creada con ' == Agregar y obtener puntos en google maps == El primer partial (mapsGetPunto.phtml) sirve para obtener la latitud y longitud de un punto en el mapa. Los datos se muestran en...') |
|||
(No se muestran 7 ediciones intermedias del mismo usuario) | |||
Línea 1: | Línea 1: | ||
− | == | + | == Obtener puntos en google maps == |
− | El | + | El partial (mapsGetPunto.phtml) sirve para obtener la latitud y longitud de un punto en el mapa. Los datos se muestran en una ventana informativa dentro del mismo mapa y también pueden usarse en 2 input text para que puedan guardarlos en una base de datos o lo que quieran. |
+ | |||
+ | == Partial mapsGetPunto.phtml == | ||
+ | |||
+ | <source lang=javascript> | ||
+ | <?php | ||
+ | $apiKey = ""; | ||
+ | ?> | ||
+ | <style type="text/css"> | ||
+ | .mimapa{width:500px;height:500px;} | ||
+ | </style> | ||
+ | |||
+ | <? echo '<div id="mimapa" class="mimapa"></div>'; ?> | ||
+ | <script type="text/javascript"> | ||
+ | var mimapa; | ||
+ | var gmarkers = new Array(); | ||
+ | |||
+ | function initialize(){ | ||
+ | if(GBrowserIsCompatible()){ | ||
+ | //creamos un nuevo mapa | ||
+ | mimapa = new GMap2(document.getElementById("mimapa")); | ||
+ | //esablecemos el centro del mapa | ||
+ | center = new GLatLng(<?php echo $centro['lat'];?>, <?php echo $centro['lng'];?>); | ||
+ | mimapa.setCenter(center, <?php echo $centro['zoom'];?>); | ||
+ | //elegimos la interfaz del mapa | ||
+ | mimapa.setUIToDefault(); | ||
+ | |||
+ | //creamos un nuevo punto y hacemos que sea arrastrable(draggable) | ||
+ | var marker = new GMarker(center, {draggable: true}); | ||
+ | |||
+ | //en el evento dragstart(comenzar a arrastrar) escondemos la ventana de info | ||
+ | GEvent.addListener(marker, "dragstart", function() { | ||
+ | map.closeInfoWindow(); | ||
+ | }); | ||
+ | |||
+ | //en el evento dragend(terminar de arrastrar) mostramos la ventana de info | ||
+ | GEvent.addListener(marker, "dragend", function() { | ||
+ | marker.openInfoWindowHtml("Latitud:..."+marker.getPoint().lat()+"<br/>Longitud:"+marker.getPoint().lng()); | ||
+ | //y mandamos los datos a los input text | ||
+ | document.getElementById('lat').value=marker.getPoint().lat(); | ||
+ | document.getElementById('lng').value=marker.getPoint().lng(); | ||
+ | }); | ||
+ | |||
+ | mimapa.addOverlay(marker); | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | <?php echo "<script type='text/javascript' src='http://maps.google.com/maps?file=api&;v=2&key=".$apiKey."&async=2&callback=initialize'></script>"; ?> | ||
+ | </source> | ||
+ | |||
+ | |||
+ | |||
+ | == Uso del partial mapsGetPunto.phtml == | ||
+ | |||
+ | Para usarlo deben llamar al partial desde cualquier view así: | ||
+ | |||
+ | <source lang=php line> | ||
+ | <?php $centro=array('lat'=>'-24.79', 'lng'=>'-65.41', 'zoom'=>'14'); | ||
+ | View::partial('mapsGetPunto', false, array('centro'=>$centro)); ?> | ||
+ | |||
+ | <?=input_field_tag('lat')?><br/> | ||
+ | <?=input_field_tag('lng')?> | ||
+ | </source> | ||
+ | |||
+ | El marcador rojo se puede arrastrar y soltar y cuando se lo deja caer en un algún lado es cuando muestra los datos. El array centro tiene las coordenadas donde centraremos el mapa y también el zoom que queremos darle. Y los input ‘lat’ y ‘lng’ son donde podremos obtener los valores de latitud y longitud respectivamente. | ||
+ | |||
+ | Autor: @sefsinalas | ||
+ | Fuente: http://paraisolinux.com/2-partial-utiles-de-google-maps-para-kumbiaphp/ | ||
+ | |||
+ | [[Archivo: Getpunto-273x300.png]] | ||
+ | |||
+ | [[Categoría:Tutoriales KumbiaPHP]] | ||
+ | [[Categoría:Partials]] |
Revisión actual del 03:42 24 ene 2010
Obtener puntos en google maps[editar]
El partial (mapsGetPunto.phtml) sirve para obtener la latitud y longitud de un punto en el mapa. Los datos se muestran en una ventana informativa dentro del mismo mapa y también pueden usarse en 2 input text para que puedan guardarlos en una base de datos o lo que quieran.
Partial mapsGetPunto.phtml[editar]
<?php
$apiKey = "";
?>
<style type="text/css">
.mimapa{width:500px;height:500px;}
</style>
<? echo '<div id="mimapa" class="mimapa"></div>'; ?>
<script type="text/javascript">
var mimapa;
var gmarkers = new Array();
function initialize(){
if(GBrowserIsCompatible()){
//creamos un nuevo mapa
mimapa = new GMap2(document.getElementById("mimapa"));
//esablecemos el centro del mapa
center = new GLatLng(<?php echo $centro['lat'];?>, <?php echo $centro['lng'];?>);
mimapa.setCenter(center, <?php echo $centro['zoom'];?>);
//elegimos la interfaz del mapa
mimapa.setUIToDefault();
//creamos un nuevo punto y hacemos que sea arrastrable(draggable)
var marker = new GMarker(center, {draggable: true});
//en el evento dragstart(comenzar a arrastrar) escondemos la ventana de info
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
//en el evento dragend(terminar de arrastrar) mostramos la ventana de info
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Latitud:..."+marker.getPoint().lat()+"<br/>Longitud:"+marker.getPoint().lng());
//y mandamos los datos a los input text
document.getElementById('lat').value=marker.getPoint().lat();
document.getElementById('lng').value=marker.getPoint().lng();
});
mimapa.addOverlay(marker);
}
}
</script>
<?php echo "<script type='text/javascript' src='http://maps.google.com/maps?file=api&;v=2&key=".$apiKey."&async=2&callback=initialize'></script>"; ?>
Uso del partial mapsGetPunto.phtml[editar]
Para usarlo deben llamar al partial desde cualquier view así:
<?php $centro=array('lat'=>'-24.79', 'lng'=>'-65.41', 'zoom'=>'14');
View::partial('mapsGetPunto', false, array('centro'=>$centro)); ?>
<?=input_field_tag('lat')?><br/>
<?=input_field_tag('lng')?>
El marcador rojo se puede arrastrar y soltar y cuando se lo deja caer en un algún lado es cuando muestra los datos. El array centro tiene las coordenadas donde centraremos el mapa y también el zoom que queremos darle. Y los input ‘lat’ y ‘lng’ son donde podremos obtener los valores de latitud y longitud respectivamente.
Autor: @sefsinalas Fuente: http://paraisolinux.com/2-partial-utiles-de-google-maps-para-kumbiaphp/