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: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
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-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 28: | Línea 26: | ||
Abrimos nuestra aplicación y colocamos la librería de jQuery en la cabecera de nuestra plantilla(template): | Abrimos nuestra aplicación y colocamos la librería de jQuery en la cabecera de nuestra plantilla(template): | ||
− | <script type= | + | <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>, siempre es mejor integrar esta librería desde servidores que ofrezcan compresión y velocidad de descarga, a menos que tengas tu aplicación en un servidor que te permita mejorar estos tiempos de descarga. |
− | |||
− | |||
Para saber como manejar jQuery en KumbiaPHP [http://wiki.kumbiaphp.com/Integrar_KumbiaPHP_Spirit_con_jQuery lee esta seccion] | Para saber como manejar jQuery en KumbiaPHP [http://wiki.kumbiaphp.com/Integrar_KumbiaPHP_Spirit_con_jQuery lee esta seccion] | ||
Línea 40: | Línea 36: | ||
<source lang=php> | <source lang=php> | ||
− | <? | + | <? |
− | + | $mapWidth = (isset($width))? $width:300; | |
− | + | $mapHeight = (isset($height))? $height:300; | |
− | + | $mapBorder = (isset($border))? $border:'1px solid #ccc'; | |
− | + | $apiKey = "Pega aquí tu APIKey"; | |
− | + | $lat = 4.142427110849189; | |
− | + | $lng = -73.62702369689941; | |
− | + | $zoom = 14; | |
− | + | $mapType = 'G_SATELLITE_MAP'; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <div id="mimapa" | + | echo '<div id="mimapa" style="width"',$mapWidth,'px;height:',$mapHeight,'px;border:',$mapBorder,'"'></div>'; |
− | + | echo '<script type=\'text/javascript\'> | |
− | <script type= | ||
var mimapa; | var mimapa; | ||
var gmarkers = new Array(); | var gmarkers = new Array(); | ||
− | + | ||
− | + | function initialize(){ | |
if(GBrowserIsCompatible()){ | if(GBrowserIsCompatible()){ | ||
− | mimapa = new GMap2(document.getElementById( | + | mimapa = new GMap2(document.getElementById(\'mimapa\')); |
− | mimapa.setCenter(new GLatLng( | + | mimapa.setCenter(new GLatLng('.$lat.', '.$lng.'), '.$zoom.'); |
− | mimapa.setMapType( | + | mimapa.setMapType('.$mapType.'); |
− | }else{alert( | + | }else{alert(\'Atencion:\nLo sentimos, tu navegador no es compatible con esta version de GoogleMaps.\');} |
} | } | ||
− | + | function getMarker(id){ | |
− | + | GEvent.trigger(gmarkers[id],\'click\'); | |
− | |||
− | GEvent.trigger(gmarkers[id], | ||
} | } | ||
− | + | function getMarkers(){ | |
− | + | GDownloadUrl(\'mapa/getMarkers/\', function(data){ | |
− | GDownloadUrl( | ||
//alert(data); | //alert(data); | ||
mimapa.clearOverlays(); | mimapa.clearOverlays(); | ||
var xml = GXml.parse(data); | var xml = GXml.parse(data); | ||
− | var markers = xml.documentElement.getElementsByTagName( | + | var markers = xml.documentElement.getElementsByTagName(\'marker\'); |
for(var i=0; i<markers.length; i++){ | for(var i=0; i<markers.length; i++){ | ||
− | var id = markers[i].getAttribute( | + | var id = markers[i].getAttribute(\'id\'); |
− | var name = markers[i].getAttribute( | + | var name = markers[i].getAttribute(\'name\'); |
− | var des = markers[i].getAttribute( | + | var des = markers[i].getAttribute(\'description\'); |
− | var address = markers[i].getAttribute( | + | var address = markers[i].getAttribute(\'address\'); |
− | var lat = markers[i].getAttribute( | + | var lat = markers[i].getAttribute(\'lat\'); |
− | var lng = markers[i].getAttribute( | + | var lng = markers[i].getAttribute(\'lng\'); |
− | var type = markers[i].getAttribute( | + | var type = markers[i].getAttribute(\'type\'); |
var marcador = createMarker(id, name, des, address, lat, lng, type); | var marcador = createMarker(id, name, des, address, lat, lng, type); | ||
mimapa.addOverlay(marcador); | mimapa.addOverlay(marcador); | ||
Línea 116: | Línea 85: | ||
var marker = new GMarker(loc, {title:name}); | var marker = new GMarker(loc, {title:name}); | ||
GEvent.addListener(marker, "click", function(){ | GEvent.addListener(marker, "click", function(){ | ||
− | var html = '<h1>'+name+'<h1><br/><h2>'+des+'</h2><br/><h3>'+address+'</h3>'; | + | var html = \'<h1>\'+name+\'<h1><br/><h2>\'+des+\'</h2><br/><h3>\'+address+\'</h3>\'; |
marker.openInfoWindowHtml(html); | marker.openInfoWindowHtml(html); | ||
}); | }); | ||
Línea 123: | Línea 92: | ||
return marker; | return marker; | ||
} | } | ||
− | </script> | + | </script>'; |
− | + | ||
− | <script type= | + | 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 102: | ||
<source lang=php> | <source lang=php> | ||
− | <?php View::partial('mapa', false, array(' | + | <?php View::partial('mapa', false, array('width'=>'500', 'height'=>'500')); ?> |
− | <a href="#" onclick="getMarkers( | + | <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. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== El Controlador == | == El Controlador == | ||
− | En nuestro controlador tendremos una accion llamada | + | 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 | + | function getMarkers(){ |
$this->result = $this->Points->find(); | $this->result = $this->Points->find(); | ||
} | } | ||
Línea 180: | Línea 140: | ||
<?php | <?php | ||
class Points extends ActiveRecord{ | class Points extends ActiveRecord{ | ||
− | + | var $name = 'Points'; | |
} | } | ||
?> | ?> | ||
Línea 213: | Línea 173: | ||
[[Categoría:Tutoriales KumbiaPHP]] | [[Categoría:Tutoriales KumbiaPHP]] | ||
− | |||
− | |||
− |