Componente con JQuery e Googlemaps

Home Professione Joomla!Hack-lab Plog Parapendio

Joomla 1.5

Domenica 21 Novembre 2010 14:47

L'argomento di questo articolo si intuisce dal titolo anche se in realtà è un po' limitativo in quanto saranno molte di più le cose che si potranno acquisire, JQuery ha infiniti comodi plugin da implementare nel nostro sito, capaci di migliorarne di molto l'aspetto e le funzionalità, non ultimo vedremo ancora una volta come orientarsi con l'mvc e il framework di Joomla nello sviluppo di un componente.

Un ambiente test

lo costruiamo velocemente in qs modo:
creiamo la cartella com_maps in /administrator/components, contenente due files:

admin.maps.php - index.html


<html><body  bgcolor="#FFFFFF"></body></html>

creiamo la cartella com_maps in /components (frontend), contenente:

maps.xml


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM "http://dev.joomla.org/xml/1.5/component-install.dtd">
<install type="component" version="1.5.0">
 <name>Nome che hai messo nel db</name>
 <!-- opzionali -->
 <creationDate>17-11-2010</creationDate>
 <author>Spazioalchimia</author>
 <authorEmail>tua_dot_email.it</authorEmail>
 <authorUrl>Tuo_Sito</authorUrl>
 <copyright>Fanne ciò che vuoi</copyright>
 <license>Licenza</license>
 <version>Vers 0.0</version>
 <description>Le mie mappe</description>
</install>

maps.php


<?php
defined('_JEXEC') or die('Restricted access');
require_once (JPATH_COMPONENT.DS.'controller.php');
// se avete un css decommentate sotto (di default si chiama... default)
#JHTML::_('stylesheet', 'default.css', 'components/com_maps/');

$controller = new MapsController();
$controller->execute( JRequest::getWord( 'task') );
$controller->redirect();
?>

controller.php


<?php
jimport('joomla.application.component.controller');

class MapsController extends JController{
 function display(){
 $view =& $this->getView(maps, 'html');
 $model = $this->getModel('geo');
 $mapdata = $model->getMapdata();
 $view->assignRef('mapdata', $mapdata);
 $view->setModel($model);
 $view->display();
 }
}
?>

Creiamo la cartella models contenente un file model che io ho chiamato :

geo.php


<?php
defined('_JEXEC') or die();
jimport('joomla.application.component.model');

class MapsModelGeo extends JModel {
 function __construct(){
 parent::__construct();
 }

 function getMapdata(){

 // Quì potete fare una query i cui risultati valorizzeranno lo script sotto
 //   $db =& JFactory::getDBO();
 //   $query = 'SELECT * FROM #######;

 // per ora mi limito a mettere valori fissi
 return "
 var latlng = new google.maps.LatLng(-34.397, 150.644);
 var myOptions = {
 zoom: 8,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById('map'),myOptions);";
 }
}
?>

Creiamo la cartella views, contenente una cartella che chiamerete maps contenete a sua volta:

view.html.php


<?php
jimport( 'joomla.application.component.view');

class MapsViewMaps extends JView{

 function display($tpl = null) {

 $mapdata =& $this->get('mapdata');

 $document =& JFactory::getDocument();
 $document->addScript('http://maps.google.com/maps/api/js?sensor=true');
 $document->addScript(JURI::root(true).'/components/com_para/assets/js/jquery-1.4.4.min.js');
 $document->addScript(JURI::root(true).'/components/com_para/assets/js/jquery.googlemaps1.01.js');
 $document->addScriptDeclaration("document.ready = function() { $mapdata; }");

 parent::display($tpl);
 }
}
?>

Creiamo la cartella del template all'interno dell'ultima cartella (maps) che chiamerete come da standard tmpl, contenente:

default.php

<?php
defined('_JEXEC') or die('Restricted access');
?>

<div id="map"></div>

Io ho l'abitudine di fare una cartella che chiamo assets che contiene css e script in ulteriori cartelle css e js. Gli script sopra sono impostati in qs modo, quindi se seguite il mio modo bene, altrimenti occhio alle path!
Nella cartella js metto i due script jquery e googlemaps che trovate rispettivamente:
http://jquery.com/
http://googlemaps.mayzes.org/

Il plugin usa la versione 3 delle api e NON richiede key di googlemaps, ha le funzionalità di streetview ed è compatibile con Iphone.

Installiamo da db il componente inserendo in jos_components una riga con valorizzati qs parametri:
nome -> Quello che volete, link -> option=com_maps (il nome della cartella componente), option -> com_maps

Ecco fatto! Basta creare un menu e linkarlo alla view e avete la vostra mappa google.

Se poi volete mappe originali:
http://www.41latitude.com/post/1268734799/google-styled-maps

O un comodo tool:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

O un'altra versione di questo tutorial:
http://forum.joomla.it/index.php/topic,118693.0.html

function display($tpl = null) {

$mapdata =& $this->get('mapdata');

$document =& JFactory::getDocument();
$document->addScript('http://maps.google.com/maps/api/js?sensor=true');
$document->addScript(JURI::root(true).'/components/com_para/assets/js/jquery-1.4.4.min.js');
$document->addScript(JURI::root(true).'/components/com_para/assets/js/jquery.googlemaps1.01.js');
$document->addScriptDeclaration("document.ready = function() { $mapdata; }");

parent::display($tpl);

}

Aggiungi commento

JComments