Oggi ti suggerisco un metodo davvero comodo per integrare le Google Maps in una pagina web: jMapping
jMapping è un plugin di jQuery che ti permetterà di integrare comodamente e velocemente una mappa in una pagina web, vediamo come. jMapping dipende dai plugin jQuery.metadata, MarkerManager e MapIconMaker, trovi i link a questi plugin nella home page di jMapping; scarica i plugin e includili nella tua pagina web insieme alle librerie jQuery e, ovviamente, jMapping:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=API_KEY"></script> <script type="text/javascript" src="jquery.jmapping.js"></script> <script type="text/javascript" src="jquery.metadata.js"></script> <script type="text/javascript" src="mapiconmaker.js"></script> <script type="text/javascript" src="markermanager.js"></script> |
Ovviamente sostituisci il parametro API_KEY con la tua API Key. Ora posiziona i seguenti div nella tua pagina web:
<div id="map" style="width:600px;height:400px;"></div> <div id="map-side-bar"> <div class="map-location" data="{id: 1, point: {lng: 12.49248, lat: 41.89028}, category: 'market'}"> </div></div> |
A questo punto richiama jMapping specificando l’ID univoco che in questo caso è “map”:
<script type="text/javascript"> $(document).ready(function(){ $('#map').jMapping(); }); </script> |
Nella pagina usage trovi tutte le opzioni disponibili per configurare opportunamente le tue mappe 😉
emawebdesign
Full Stack Web Developer/SEO Specialist. PHP, CMS, Framework MVC, CakePHP e HTML5/JavaScript expert. Sviluppo progetti e strategie web dal 1999.
Pubblicato in Web Development
Una volta per un progettoaveto provato ad utilizzare questo plug ins ma purtroppo non funzionava come volevo io e ho dovuto utilizzare la “classica” funzione showaddress.
ciao
Amico mio un esempietto ce lo metti?
@Merlinox di esempi ne hai già 6 http://vigetlabs.github.com/jmapping/examples
sono sufficienti?
Sorry, non avevo notato!
@Merlinox ti lovvo anche quando non noti le cose amico mio… 😀
[…] jMapping: utilizzare le Google Maps tramite un plugin di jQuery -Un articolo della settimana scorsa ma che voglio segnalare comunque e indicarlo come soluzione per integrare al meglio le Google Maps nelle pagine web. […]