Diferencia entre revisiones de «Obtener puntos en google maps»

De KumbiaPHP Framework Wiki
(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...')
 
Línea 1: Línea 1:
  
== Agregar y obtener puntos en google maps ==
+
== 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 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. Algo así:
+
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. Algo así:
 +
 
 +
Aqui va la captura
 +
 
 +
 
 +
== 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>

Revisión del 03:06 24 ene 2010

Obtener puntos en google maps

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. Algo así:

Aqui va la captura


Partial mapsGetPunto.phtml

<?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

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')?>