| | Laat alle verhalen zien. | Laat alleen reis verhalen zien. | Laat alleen technische verhalen zien. |
| Hoe GoogleMaps op je website te plaatsen met tracklogs van je gps en fotos genomen tijdens de trip. |
| vrijdag 06 juli 2007 | |
|
Deze howtois gemaakt om te documenteren hoe GoogleMaps op je eigen webpagina, te plaatsen met tracklogs van je gps and aanklikbare markers voor foto's, gemaakt tijdens de trip. Dit allemaal met gratis software aanwezig op het net Het kan overigens ook worden gedaan met relatief goedkope commercieel beschikbare software. (Ikzelf gebruik JetPhotoStudio) , zie hier Wat dat voor output kan genereren.) Om het echter voor elkaar te krijgen met gratis op het net verkrijgbare software volg deze tutorial; Om track data te converteren van jouw gps naar gpx formaat format Gpsbabel Om de exifdata in jouw fotos te geocoderen Met de gegevens uit de tracklog GpicSync Om De code te genereen zodat je de tracklog en bijbehorende fotos kan publiceren in google maps op je eigen website, gebruik ik de javascript code aangeleverd door Avi.Alkalay en die vindt je hier. Onze trip "van het diepe fjord naar hoge bergen " Juni 2007 Kinsarvik Hardanggervidda Noorwegen.
De tutorial
In deze uitleg wordt een tracklog bestand gebruikt van een Magellan explorist 210 1. Converteer de Tracklog naar GPX format. Eerst converteer ik mijn track.log naar track.gpx Start GpsBabelGui.exe and geef de tracklog als input and als output GPX XML. Selecteer dat je een track wilt converteren en druk op Lets Go.
Je hebt nu een tracklog bestand in het GPX formaat.
Start GpicSync and creeer een kml bestand van de foto's in jouw folder. Het GPS bestand (gpx) is het GPX bestand dat je hiervoor hebt aangemaakt. Vink de optie Google Maps export folder aan (Je kan hier een folder opgeven maar dat maakt het geheel nogal statisch, dus dat doe ik niet..)
Druk op Synchronise. Zet het volgende in de "head" sectie van de index.php van jouw Joomla thema. <!-- ********************* Script for googlemapsPlugin *************** --> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=JouwGoogleMapsApiKeyHier"> </script> <!--Google Maps Plugin logic--> <script type="text/javascript" src="Script_Pad/googlemapsPlugin.js"> </script><!--Google Maps Plugin Initialization--> <script type="text/javascript"> //<![CDATA[ MapPluginInit( /* Default maps width */ 300, /* Default maps height */ 1900, /* Use rel instad of title? */ true); //]]> </script> <!-- ********************* END Script for googlemapsPlugin *************** --> Vervolgens plak je het volgende in het door jouw te publiceren verhaal. <dl title="googlemap;w:60%;h:400;t:k" id="Titel van de Map"> <dt><a href="http://maps.google.com/?z=11&ll=60.3217,6.85219&om=0&t=k" mce_href="http://maps.google.com/?z=11&ll=60.3217,6.85219&om=0&t=k">Center of map</a> </dt> <dt><a href="Pad_van_het_KML_bestand/doc-webk.kml" title="kml">more markers</a></dt> </dl> Als je een standalone HTML bestand wilt genereren die , met behulp van het javascript, een googlemaps op jouw pagina moet toveren dan. maak een html bestand aan op jouw website met de volgende inhoud; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <!-- ********************* Script voor googlemapsPlugin *************** --> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=YourGoogleMapsApiKeyHere"> </script> <!--Google Maps Plugin logic--> <script type="text/javascript" src="PathOfTheScript/googlemapsPlugin.js"> </script><!--Google Maps Plugin Initialization--> <script type="text/javascript"> //<![CDATA[ MapPluginInit( /* Default maps width */ 300, /* Default maps height */ 1900, /* Use rel instad of title? */ true); //]]> </script> <!-- ********************* END Script for googlemapsPlugin *************** --> </head> <body> Your text here <center> <dl title="googlemap;w:60%;h:400;t:k" id="Title of Map"> <dt><a href="http://maps.google.com/?z=11&ll=60.3217,6.85219&om=0&t=k" mce_href="http://maps.google.com/?z=11&ll=60.3217,6.85219&om=0&t=k">Center of map</a> </dt> <dt><a href="Path_of_KML_File/doc-webk.kml" title="kml">more markers</a></dt> </dl> </center> </body> </html> |
|
| Laatst geupdate op ( zaterdag 21 juli 2007 ) |
| < Vorige | Volgende > |
|---|