Edición de «Como usar google maps en KumbiaPHP Framework»

De KumbiaPHP Framework Wiki

Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.

Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.

Revisión actual Tu texto
Línea 1: Línea 1:
{{cleanupbox
 
|image=[[Archivo:Information_icon4.png|45px]]
 
|texto ='''Este Artículo cumple con todos los quererimientos de los Kumbieros.'''<br />
 
}}
 
 
 
 
Gracias al gigante Google podemos trabajar con mapas georeferenciados con vistas muy actualizadas de casi todas las ciudades del mundo. En esta seccion vamos a ver como usar los mapas de Google en nuestros proyectos mediante el [http://code.google.com/intl/es-ES/apis/maps/ API de GoogleMaps].
 
Gracias al gigante Google podemos trabajar con mapas georeferenciados con vistas muy actualizadas de casi todas las ciudades del mundo. En esta seccion vamos a ver como usar los mapas de Google en nuestros proyectos mediante el [http://code.google.com/intl/es-ES/apis/maps/ API de GoogleMaps].
  
Línea 14: Línea 8:
  
 
== ¿Como empezar? ==
 
== ¿Como empezar? ==
 +
 
Estos son uno enlaces que recomiendan para familiarizarte con las funcionalidades del API de Maps:
 
Estos son uno enlaces que recomiendan para familiarizarte con las funcionalidades del API de Maps:
  
*[http://code.google.com/intl/es/apis/maps/documentation/index.html Conceptos sobre el API de Google Maps]
+
[http://code.google.com/intl/es/apis/maps/documentation/index.html Conceptos sobre el API de Google Maps]
*[http://code.google.com/intl/es-ES/apis/maps/documentation/examples/ Ejemplos del API de Google Maps]
+
 
*[http://code.google.com/intl/es/apis/maps/documentation/reference.html Referencias para el API de Google Maps]
+
[http://code.google.com/intl/es-ES/apis/maps/documentation/examples/ Ejemplos del API de Google Maps]
 +
 
 +
[http://code.google.com/intl/es/apis/maps/documentation/reference.html Referencias para el API de Google Maps]
 +
 
  
 
== Usando GoogleMaps con KumbiaPHP Framework ==
 
== Usando GoogleMaps con KumbiaPHP Framework ==
Línea 41: Línea 39:
 
<source lang=php>
 
<source lang=php>
 
<?php
 
<?php
/**
+
$mapWidth = (isset($width))? $width:300;
* KumbiaPHP web & app Framework
+
$mapHeight = (isset($height))? $height:300;
*
+
$mapBorder = (isset($border))? $border:'1px solid #ccc';
* LICENSE
+
$apiKey = "Pega aquí tu APIKey";
*
+
$lat = 4.142427110849189;
* This source file is subject to the new BSD license that is bundled
+
$lng = -73.62702369689941;
* with this package in the file LICENSE.txt.
+
$zoom = 14;
* It is also available through the world-wide-web at this URL:
+
$mapType = 'G_SATELLITE_MAP';
* http://wiki.kumbiaphp.com/Licencia
 
* If you did not receive a copy of the license and are unable to
 
* obtain it through the world-wide-web, please send an email
 
* to license@kumbiaphp.com so we can send you a copy immediately.
 
*
 
* Google Maps para aplicaciones KumbiaPHP
 
* Este partial permite crear un mapa de GoogleMaps e interactuar con marcadores y demás.
 
*
 
* @category  Kumbia
 
* @package  Partials
 
* @copyright  Copyright (c) 2005-2009 Kumbia Team (http://www.kumbiaphp.com)
 
* @license http://wiki.kumbiaphp.com/Licencia    New BSD License
 
* @author Juan Felipe Sarmiento Arias. JF. <ingjuanfelipe@gmail.com>
 
*/
 
 
 
$lat = (isset($lat))? $lat: 4.142427110849189;
 
$lng = (isset($lng))? $lng:-73.62702369689941;
 
$mapType = (isset($mapType))? $mapType:'G_SATELLITE_MAP';
 
$zoom = (isset($zoom))? $zoom:14;
 
$apiKey = "";
 
?>
 
<style type="text/css">
 
.mimapa{width:500px;height:500px;}
 
</style>
 
  
<div id="mimapa" class="mimapa"></div>
 
  
 +
echo '<div id="mimapa" style="width"',$mapWidth,'px;height:',$mapHeight,'px;border:',$mapBorder,'"></div>'?>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
var mimapa;
 
var mimapa;
 
var gmarkers = new Array();
 
var gmarkers = new Array();
+
        function initialize(){
+
function initialize(){
 
if(GBrowserIsCompatible()){
 
if(GBrowserIsCompatible()){
 
mimapa = new GMap2(document.getElementById("mimapa"));
 
mimapa = new GMap2(document.getElementById("mimapa"));
Línea 87: Línea 61:
 
}else{alert("Atencion:\nLo sentimos, tu navegador no es compatible con esta version de GoogleMaps.");}
 
}else{alert("Atencion:\nLo sentimos, tu navegador no es compatible con esta version de GoogleMaps.");}
 
}
 
}
 
+
function getMarker(id){
 
 
        function getMarker(id){
 
 
GEvent.trigger(gmarkers[id],"click");
 
GEvent.trigger(gmarkers[id],"click");
 
}
 
}
 
+
function getMarkers(){
        function getMarkers(accion){
+
GDownloadUrl("mapa/getMarkers/", function(data){
GDownloadUrl(accion, function(data){
 
 
//alert(data);
 
//alert(data);
 
mimapa.clearOverlays();
 
mimapa.clearOverlays();
Línea 123: Línea 94:
 
return marker;
 
return marker;
 
}
 
}
</script>
+
</script>';
+
 
<script type="text/javascript" src="http://maps.google.com/maps?file=api&;v=2&key=<?php echo $apiKey?>&async=2&callback=initialize"></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>
 
</source>
  
Línea 132: Línea 103:
  
 
<source lang=php>
 
<source lang=php>
<?php View::partial('mapa', false, array('lat'=>'4.15352', 'lng'=>'-73.6398', 'zoom'=>'14')); ?>
+
<?php View::partial('mapa', false, array('width'=>'500', 'height'=>'500')); ?>
<a href="#" onclick="getMarkers('mapa/MarkersXml');">ver marcadores</a>
+
<a href="#" onclick="getMarkers();">ver marcadores</a>
 
</source>
 
</source>
  
 
para este punto debemos tener un hermoso mapa en nuestra interfaz y un enlace para visualizar los marcadores.
 
para este punto debemos tener un hermoso mapa en nuestra interfaz y un enlace para visualizar los marcadores.
 
Para visualizar los marcadores en nuestro mapa, hemos de enviar a la función getMarkers como parámetro la acción donde definimos los datos xml. Este xml deberá tener el siguiente formato:
 
 
<source lang=xml>
 
<?xml version="1.0" encoding="utf-8" ?>
 
<markers>
 
  <marker id="1" name="JF" description="Saludos desde Colombia." address="www.firesoft.ws" lat="4.15352" lng="-73.6398" type="Empresas" />
 
  <marker id="2" name="Gobernacion del Meta" description="Gobernacion del Meta" address="Centro" lat="4.15147" lng="-73.6385" type="Gobierno" />
 
</markers>
 
</source>
 
  
 
== El Controlador ==
 
== El Controlador ==
En nuestro controlador tendremos una accion llamada MarkersXml para realizar la consulta de marcadores que tengamos almacenados en nuestra BD
+
En nuestro controlador tendremos una accion llamada getMarkers para realizar la consulta de marcadores que tengamos almacenados en nuestra BD
  
 
<source lang=php>
 
<source lang=php>
function MarkersXml(){
+
function getMarkers(){
 
$this->result = $this->Points->find();
 
$this->result = $this->Points->find();
 
}
 
}
Línea 180: Línea 141:
 
<?php
 
<?php
 
class Points extends ActiveRecord{
 
class Points extends ActiveRecord{
+
var $name = 'Points';
 
}
 
}
 
?>
 
?>
Línea 213: Línea 174:
  
 
[[Categoría:Tutoriales KumbiaPHP]]
 
[[Categoría:Tutoriales KumbiaPHP]]
[[Categoría:Views]]
 
[[Categoría:Partials]]
 
[[Categoría:jQuery]]
 

Ten en cuenta que todas las contribuciones a KumbiaPHP Framework Wiki pueden ser editadas, modificadas o eliminadas por otros colaboradores. Si no deseas que las modifiquen sin limitaciones, no las publiques aquí.
Al mismo tiempo, asumimos que eres el autor de lo que escribiste, o lo copiaste de una fuente en el dominio público o con licencia libre (véase Proyecto:Derechos de autor para más detalles). ¡No uses textos con copyright sin permiso!

Para editar esta página, responde la pregunta que aparece abajo (más información):

Cancelar Ayuda de edición (se abre en una ventana nueva)

Plantilla usada en esta página: