A short while ago I had to rewrite my Google-Maps GPX Viewer/Editor to work with Google Maps V3 API. I decided to use a WordPress Plugin for this purpose. The goal was to show GPX and KML files on the same map including an elevation profile and download link, Open Street Map support, a configurable WMS interface, Google- Fusion Tables, -Streetview and finally a full size button.
Since version 1.11 you’ll find an additional options-page inside the admin area where you can configure the maptype listbox and setup your own WMS server.
Plugin download: Google-Maps-GPX-Viewer
The following features are available using WordPress ShortCodes.
Map on the left
ShortCode:
[map lat=51.493 lon=7.45 z=15 maptype=satellit]
where lat=latitude, lon=longitude in WGS84 decimal (+90 to -90 / +180 to -180) and z=zoom level
Map using Googles geocoder with address=”Alexanderplatz, Berlin, Germany”, a zoom level z=15, a clickable marker marker=”yes” a markerimage=”/img/fturm.png” an infowindow infowindow=”Berlin, Fernsehturm am Alexanderplatz” an optional stylesheet to set width, height, border, margin-left, text float right. style=”width:300px; height:250px; border:1px solid gray; margin-left:20px; float:right;”
ShortCode:
[
map address="Alexanderplatz, Berlin, Germany" z=15 marker="yes" markerimage="/img/fturm.png" infowindow="Berlin Alexanderplatz" style="width:300px; height:250px; border:1px solid gray; margin-left:20px; float:right;"]
ShortCode:
[map maptype=OSM gpx="/tracks/Uplandsteig.gpx" style="width:300px; height:250px; border:1px solid gray; margin-right:20px; float:left;"]
List of ShortCodes available
- maptype=OSM select maptype roadmap, terrain, satellit, hybrid, Relief, OSM, ‘OSM cycle’, WMS
- style=”width:300px; height400px; margin:20px” must be css conform
- gpx=”direct or absolute path to the gpx-file”
- kml= “absolute path to the kml-file”
- elevation=yes/no depends on the option settings
- download=yes/no depends on the option settings
- fusion=”<table id>;<geoLocation-field>;<condition>” read more about fusion tables
- address=”Berlin, Germany” location by geocoded address
- lat=51.093 lon=7.23544 location latitude/longitude
- z=15 set zoom level (0-20) depends on maptype
- marker=yes add location marker
- markerimage=URL add custom marker image
- infowindow=”text to be published” add Infowindow
- traffic=yes add googles traffic layer
- bike=yes add googles bicyle layer
3. September 2011 um 18:56 Uhr
Sieht gut aus! One question: What instructions are there for displaying a GPX-track? Since a directory “tracks” is mentioned I created one manually in the “wp-content”-directory. I also uploaded a GPX-file (created by the Garmin Training Center software), but all I see in my blog is a map, and no route in sight. Mm. Any suggestions?
4. September 2011 um 10:26 Uhr
You should be able to use absolute or direct path to the gpx-file, which has to reside on the same server.
By the moment the plugin shows tracks and waypoints, so if your gpx-file only contains routes you will see nothing but you can simply convert routes to tracks using one of those tools you receive by a google query “convert gpx”.
6. September 2011 um 06:03 Uhr
Hello,
I replaced the yellow flag for a custom image, hciendo I’m wrong?
Greetings.
[map maptype=satellite gpx="Descargas/poisonline/radares_040.gpx" markerimage="Descargas/poisonline/radares_100.bmp" style="width:480px; height:300px; border:1px solid gray; margin-right:20px; float:left;"]
6. September 2011 um 09:05 Uhr
¡Bienvenido! Try to use a slash in front of “/Descargas/poisonline/radares_100.bmp” or use the absolute path.
23. September 2011 um 13:29 Uhr
Don’t get it, I put this on my map page in HTML and it’s not working, what am I not doing ?
map maptype=OSM gpx=”/tracks/Uplandsteig.gpx” style=”width:300px; height:250px; border:1px solid gray; margin-right:20px; float:left;”
23. September 2011 um 14:41 Uhr
You need to put it inside square brackets like:
[map maptype=OSM gpx=”/tracks/Uplandsteig.gpx” style=”width:300px; height:250px; border:1px solid gray; margin-right:20px; float:left;”]and”/tracks/Uplandsteig.gpx”must reside on your server.6. Oktober 2011 um 18:43 Uhr
Is it possible to add several addresses in one Map ? We are organizing an event with multiple locations and want to put them in one map ?
7. Oktober 2011 um 10:19 Uhr
Yes, you can generate a gpx file with multiple address points “POIs” here: “ATLsoft GPS eddi/gpx/”
(currently only in german – hint: plot=zeichnen, save=speichern, POIs=wegpunkte).
Use the “zeichnen” function, select “wegpunkte”, mark your addresses on the map.
You can edit the marker content for your need e.g. address, link and a description
even change the marker image by a click on the icon in edit mode.
Donwnload the file with “speichern”, upload it to your server and put a ShortCode like:
[map gpx="http://myServer//path/myGPX-File.gpx"] thats all…
14. Oktober 2011 um 17:01 Uhr
Installed plug in as required. After searching for hours can’t find out/where to enter an existing Google API key.
Thanks
14. Oktober 2011 um 18:45 Uhr
The plugin uses the new google V3 API, where no key is needed.
24. Oktober 2011 um 20:32 Uhr
Hey there,
I’ve recently installed the plugin and I am now trying to use the shortcode in a sidebar widget. Unfortunately, it doesn’t work right yet: http://hella-stroh.de/weblog/fototouren/maybach
Do you have any ideas how to manage this?
Regards, Hella
25. Oktober 2011 um 09:52 Uhr
Yes, ShortCodes are working inside posts or pages only.
30. Oktober 2011 um 15:50 Uhr
Traffic works with all european countrys except France. Do u have a solution for me ? Thanks
30. Oktober 2011 um 19:39 Uhr
I don’t know the reason. Have a look here: http://www.google.com/support/forum/p/maps/thread?tid=504df4751a2b7625&hl=en
31. Oktober 2011 um 14:30 Uhr
Okay Thanks.
Last question -> Can we force infowindow to show at startup ?
3. November 2011 um 00:01 Uhr
well, ok thanks.
no lat/lon marker for me, i’m using a kml file, and id would like to show infowindow of multiple kml markers….
5. November 2011 um 10:06 Uhr
The kml layer is constructed by google maps with no access from outside. On the other hand this functionality will be available on gpx files soon.
13. November 2011 um 16:33 Uhr
Hi
I’m trying to display kml files in google and I tried to use your wordpress plugin. Unfortunately it displays the kml info OK, but not the map. So I have a lines and markers on a grey background.
I can’t show you because it is still in a preview situation.
The KML files are located in http://www.kraaij.nl/kml/
15. November 2011 um 16:16 Uhr
the problem is made inside your themes style.css.
.post img {
background-color: #F3F3F3; <—————– remove this
border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px;
padding: 5px;
}
17. November 2011 um 08:36 Uhr
Can you see any reason why the following short code plus gpx file does not produce any output?
Thank you in advance I very much appreciate any help.
Ron
[map maptype=OSM gpx=”/tracks/test.gpx”
style=”width:300px; height:250px;
border:1px solid gray; margin-right:20px; float:left;”]
cetacean_track
17. November 2011 um 10:45 Uhr
There may be a lot of reasons, send me a link so I can have a look inside.
21. November 2011 um 18:25 Uhr
My gpx file contains multiple tracks, so that the map is cluttered with markers for each track. I’d like to be able to keep them as multiple tracks so viewers could see the individual segments of the trip when they zoom in closer, but I don’t want the huge markers when its zoomed out. Is there any way to do this?
thanks
21. November 2011 um 18:56 Uhr
Just rename or delete the corresponding marker icon inside the plugins image directory “google-maps-gpx-viewer/img/trz_0.png”
21. November 2011 um 21:28 Uhr
thanks for your quick reply, that got rid of the markers nicely. A couple more questions for you…
I’d like to change the size of the map displayed (from 600px to 900px width); but can’t seem to find where to edit that?
The map (with gpx overlay) is displayed on a page. When the page is first opened, the map shown is centered on Europe; it takes a couple of minutes for the view to move to the area my gpx file covers (west coast of north america), to zoom in appropriately, and for the track to be displayed. I am worried my readers will click away thinking that they cannot see what they came for. Is there any way to, at a minimum, have the map open centered on North/South America?
And lastly, when I click for the map to be displayed full size, it looks great, except my nav bar is floating on top of the map. Is there any way to change this? Or is that a problem with the way my theme is set up?
really appreciate your help
22. November 2011 um 12:08 Uhr
changing the map size is done by style command inside the ShortCode like
[map style="width:600px; height:900px;"] The style parameter must be css conform.
Large amounts of gpx data may need time to calculate the overlay and viewport because most of the work is done on client side.
There are some ways to reduce the gpx file size to make loading faster. Feel free to send me a link, maybe I can give some more hints.
E.g. try to you use kml instead of gpx, kml is calculated on server (google) side.
The map start point can be set by expanding the ShortCode like:
[map lat=37.75 lon=-122.47 z=8 style="width:600px; height:900px;"]
anywhere near San Francisco:
lat=37.75 = Latitude
lon=-122.47 = Longitude
z=8 = Zoom level
Finally, increase the maps z-index using the plugins option settings to a value higher than the navbars one or change the z-index of your navbar to a lower level e.g. “1″, this work must be done inside the Themes “style.css”.
28. November 2011 um 17:17 Uhr
Hi, nice plugin but unfortunately it doesn’t work for me. I generated a KML file via google earth and tried to use it with your plugin to show the map and the “Höhenprofil”. It also doesn’t work after i converted the kml into a gpx (track) with GPies.com. I always get a maps without the rout and without “Höhenprofil”.
Any idea what i do wrong? THX
28. November 2011 um 18:22 Uhr
The elevation profile “Höhenprofil” is provided since V 1.21. It needs at least one “Linestring” followed by a few pairs of “coordinates” inside the KML respectively one “trk trkseg trkpt” element if you use GPX, to appear.
30. November 2011 um 15:56 Uhr
I have some Google Maps javascipt polyline code (see below) and I wondered if there was a way to use this data within Google Maps GPX viewer to draw tracks (they represent walls (in different) colours on a local map).
Here is the code I have:
var latlng = new google.maps.LatLng(52.7337, -1.7522);var myOptions = {zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyline = new google.maps.Polyline({path: [
new google.maps.LatLng(52.7315, -1.7598),
new google.maps.LatLng(52.7314, -1.7582)
], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 5} );
polyline.setMap(map); ...
30. November 2011 um 18:49 Uhr
Put your polylines inside a kml-file instead and use this ShortCode:
[map address="place near your lat-lon" kml="path/to/your.kml"]
2. Dezember 2011 um 02:05 Uhr
Tolles Engagement hier!
Thank you for your Geo-Mapping Support!
I was trying to avoid adding another WP-plugin, but to include a KML-File is a hard task for an API-V3-outsider (only good HTML/CSS knowledge). I’m using the plugin in a fluid-flexible layout (responsive) theme:
[map lat=46 lon=11 z=13 maptype=terrain kml="http://domain.com/files/testing.kml" style="width:100%; height:340px; border:1px solid gray;"]
Everything is ok, except that the desired zoom-level 13 is correct at first loading the map-data, but then, when the KML is loaded, the focus goes probably to all the KML-elements (z=12?). Looks like the viewport is re-calculated automatically? Is this behaviour avoidable without making a fork of the JS-files? If not, can you give a coding-hint?
I use qTranslate for multilingual content support. I have noticed, that in the JS-code var msg_0x are defined in english/german, but not in other languages? Is the Browser-language-setting relevant to the output? Can you give a hint how to adding other language-support (or better giving a possibility to include it in future releases)?
Wish you all a good day… -_-
2. Dezember 2011 um 12:40 Uhr
Due to GPX and KML overlays calculate there own viewport the lat/lon- and z- option wouldn’t work. You may use an address=”place-near-your-lat-lon”, which will be added to the viewport.Since V 1.22 lat/lon/z values overwrite the viewport calculation from GPX, KML and FusionTable.
Language support is done by adding a po-file to the plugins language directory. For example, rename the google-maps-gpx-viewer-de_DE.po to google-maps-gpx-viewer-it_IT.po, use an editor like PoEdit and translate the content to your language. That’s all, you may send me the file, I’ll add it to the next release. Read more about WordPress language support.
2. Dezember 2011 um 15:47 Uhr
address=”place-near-your-lat-lon” is not the solution for my goal. I have a KML File with some Placemarks and Polygons. Most of them are in the interesting area (~ 20 km) but some are outside in a wider area (~80 km). I want to focus on the interesting area for the visitor. Is this “calculate there own viewport” then a Google-API feature that is not avoidable?If I find a solution for my focus problem so that I will use your plugin, I will try to make a google-maps-gpx-viewer-it_IT.po and send it to you
Gutes Mapping weiterhin und danke…
13. Dezember 2011 um 13:10 Uhr
Many thanks for your “it-IT” translation.
14. Dezember 2011 um 03:41 Uhr
After the update to v1.22 everything (kml + lat/lon/z and the css for table) seems to work fine. Thank you for coding that so quickly!
10. Dezember 2011 um 16:58 Uhr
I love this plugin. Especially the wms ability.
One question though. is it possible to display a google hosted kml on top of the maps? Like:
“http://maps.google.no/maps/ms?authuser=0&vps=2&hl=no&ie=UTF8&msa=0&output=kml&msid=200277159472413315647.0004b359e059bf207754b”
I tried just linking to this in the shortcode [map address="tromsø, lanes" z=10 kml="link"]
I could ofcourse just embed the google map, but that would not let me use the wms service I’m using
Thank you very much, from Norway
10. Dezember 2011 um 17:30 Uhr
sure, have a look
ShortCode:
[map kml="http://maps.google.no/maps/ms?authuser=0&vps=2&hl=no&ie=UTF8&msa=0&output=kml&msid=200277159472413315647.0004b359e059bf207754b" address="tromsø, lanes" z=10 elevation=no download=no]
11. Dezember 2011 um 14:25 Uhr
Well.. It worked, once
It gives a an error from the browser saying “Error: undefined + error” but continues to load the map after i click ok. The first time it showed the kml overlay but I have not been able to reproduce this.
Thank you so much for your help
11. Dezember 2011 um 16:00 Uhr
Part of it was me being an idiot
I didn’t notice that a ” was missing. I still get the error message though, but the kml overlay works.
I also didnt notice that the wordpress editor changed the shortcode (adding a href link) when using visual, had to use html view to make it work.
Summary: Works, but browser produces requester: “Error: undefined + error”
11. Dezember 2011 um 18:28 Uhr
The error message is the result of trying to get an elevation profile. This only works with files on localhost. You may use the ShortCode elevation=no or switch off elevation profile under Settings->Google Maps.
14. Dezember 2011 um 22:07 Uhr
Hi, having trouble with a fusion map. The only parameter that seems to be loading correctly is “address”. Any ideas?
Here’s my shortcode: [map fusion="2423290" maptype="satellit" address="Chicago, IL" z="4"]
This is on WordPress 3.3.
15. Dezember 2011 um 13:25 Uhr
Fusion table 2423290 doesn’t deliver a result, have a look here: “How can I make my table public“
15. Dezember 2011 um 22:15 Uhr
Thanks….it’s definitely set as public. See the following link: https://www.google.com/fusiontables/embedviz?viz=MAP&q=select+col5+from+2423290+&h=false&lat=41.89358778006335&lng=-87.66476999999998&z=10&t=1&l=col5
16. Dezember 2011 um 11:04 Uhr
The URLreturns “Missing query parameter q”, but this work for me: [map fusion="2423290;col5,col6"]
17. Dezember 2011 um 00:47 Uhr
Thanks again for your help on this. I figured out what the problem is, so thought I’d post here in case anyone else ends up with the same issue.
I’m using a Themify.me theme called Elemin (http://themify.me/themes/elemin), and Themify has some built-in utilities. One of these utilities is a map, which happens to use the shortcode ‘map’. So the Themify shortcode was overwriting your shortcode. Had to redeclare the shortcode in my custom_functions.php file.
Thanks again for your help, and for this great plugin!
17. Dezember 2011 um 05:14 Uhr
Hi, This is just what i want for a walking website! sadly i keep getting black screens:
http://www.mjswalking.co.uk/?p=206
The code used is:
[map gpx="http://mjswalking.co.uk/GPS_files/Haystacks_and_Fleetworth.gpx" style="width:580px; height:400px;border-radius: 42px 4px 4px 4px; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.35); border: 1px solid rgb(169, 187, 223);padding:0px;"]
I did see a map at 300 x 250 but now that seems to be gone too
Can you help?
17. Dezember 2011 um 10:58 Uhr
Your gpx-file contains routes only. Convert routes to tracks using one of those tools you receive by a google query “convert gpx”.
28. Dezember 2011 um 01:17 Uhr
Hello,
Having tried a few maps plugins for my website, I have come across yours, and it looks like it will do exactly what I need and more. My main requirement is to combine tracks from one gpx/kml file with waypoints from another gpx file.
However I am having some issues getting the plugin working at all. When I add the shortcode, the map window shows up, but block without the map or gpx contents. This happens if I link to a gpx file, or simply put the [map] shortcode up.
Strangely if I put up the longitude and latitude, ie; [map lat=42 lon=-110 z=4 kml="http://www.afowler.co.uk/wordpress/wp-content/uploads/2011/12/OR.kml"] the map shows up, but without the gpx contents. I have tried using .kml files and it produces the same result. Please see http://www.afowler.co.uk/adventures/ for examples of what is happening. Any idea of what is happening and how to fix it?
28. Dezember 2011 um 10:07 Uhr
The head section of your website looks pretty clean.
The plugin needs jQuery to run and should load this automatically but someone prevents it from loading.
There should be a line like:
<script src="where-to-find/jquery.js"></script>inside the head
28. Dezember 2011 um 15:18 Uhr
Hello,
Thanks for the quick reply. I can’t see the code you want me to add to the head. Did you mean something like; “”? I already use jquery elsewhere on the site, so I have now linked to it in the header, but the problem still persists. Any other ideas?
28. Dezember 2011 um 18:59 Uhr
Your jQuery is V 1.2. (2007) and it produces some errors. I started with V 1.4.2 and tested up to 1.7.1. Try to use a newer one like:
<script src=”http://code.jquery.com/jquery-latest.js”></script>
2. Januar 2012 um 23:07 Uhr
Hi,
I can’t get this to work.
No matter what I try, I get a map on the page but the map is zoomed in somewhere in Africa? Not my route recorded on my iPhone using RunKeeper?
What am I doing wrong?
Regards.
Steve
3. Januar 2012 um 11:03 Uhr
Send me a link, the GPX and the used ShortCode.
8. Januar 2012 um 20:15 Uhr
Hi Bernd,
First off, well done on such an awesome plugin! I was just looking for a Google maps pluging when I came across this, so to find the extra profile info was a massive bonus.
I’m having trouble getting kml files to work. GPX files work fine, but the kmls don’t seem to get processed. Could you take a look for me? Something in the kml that your plugin doesn’t like, or just me being a numpty? I’d rather use kmls as they are much smaller in size.
http://www.whereisandy.net/?page_id=833
Many thanks,
Andy
9. Januar 2012 um 10:39 Uhr
Hi Andy,
use the full path e.g. http://www.xyz.com/maps/1.kml for KML.
9. Januar 2012 um 13:14 Uhr
Thanks Bernd,
That did the trick. Next question, how do I get the elevation profile to display with the kml? I set elevation=yes.
Cheers,
Andy
9. Januar 2012 um 13:53 Uhr
Elevation profile on that KML works fine for me. Try to change the KML-file permisson/owner/group to meet the WWW-servers one.
25. Januar 2012 um 02:27 Uhr
I seem to be having the exact same problem as Andy, and I have noticed that Andy and I are using the same web host. What do you mean when you say, “…change the KML-file permisson/owner/group to meet the WWW-servers one”?
I’ve downloaded the “kml.kml” file that you use in your KML Elevation example and then uploaded that “kml.kml” file to my server and it shows the map but still no elevation profile. GPX files work as expected.
Things I’ve tried:
Checked server’s KML mime type is set to application/vnd.google-earth.kml+xml.
Set elevation=true in the shortcode
Made sure “Elevation Profile” is checked on the settings page.
Tried multiple KML files with no success.
Changed “kml.kml” file permissions from 644 to 755 and cleared cache with no luck.
Any help or guidance you can provide will be appreciated. Thank you for your time and for creating such an excellent GPX WordPress Plugin.
25. Januar 2012 um 10:46 Uhr
Try to upload the KML file through yours WP-media-upload instead of using FTP.
24. Januar 2012 um 16:25 Uhr
Is there anyway to change the width or height of the infobox?
24. Januar 2012 um 17:28 Uhr
No, the calculation depends on map size and infowindow content.
Pingback: Google Maps GPX Plugin and Foursquare | Jesse Friedman
6. Februar 2012 um 13:49 Uhr
Hello,
Thank you for creating such a great plugin. I look forward to using it on my site.
One question- I’m using a “My Places” KML file. It works great. However, since my map has many markers located close together, is there a way to have the “infowindow” for the specific place marker popped up so it can be differentiated from the surrounding place markers? Otherwise, it’s difficult to know which one to choose.
Perhaps if the Lat/Longitude is precisely the same as an existing marker on my KML?
Thank you so much for your help!
Best,
Matt
6. Februar 2012 um 16:39 Uhr
Unfortunately no, because google draw the KML onto the map
11. Februar 2012 um 01:30 Uhr
When trying to use the plugin I constantly get the following error message in the apache log:
[Sat Feb 11 00:23:40 2012] [error] [client 122.57.206.24] PHP Warning: Cannot modify header information - headers already sent by (output started at /plugins/google-maps-gpx-viewer/php/load_jsapi.php:11) in /wp-includes/pluggable.php on line 866Any idea what might be causing this?
11. Februar 2012 um 11:27 Uhr
Seems to be a “wp_redirect” problem. Does anything appears on the screen?
17. Februar 2012 um 04:46 Uhr
Just tested again to freshen my memory. It works as long as there is no lable overlay on the satellite picture. And it is not always shown in the preview of the article.
15. Februar 2012 um 11:39 Uhr
Hi, thanks for the plugin. Great that you’re using the latest API too. It’s what made me choose this over others.
I have some requests please:
Would you be able to include speed profiles as well as elevation, if available in the GPX? I think you can do heartrate too, so that would also be good.
Secondly, would you be able to include more customisation of the profiles? The main one I’d like is for line graphs rather than column. Being able to change background colours, etc. would also be nice.
I have one other issue, where the map doesn’t display properly when used in conjunction with a WordPress content tabs plugin. I know this isn’t your problem as the map is fine when the other plugin is disabled, but wondered whether you’d be able to advise.
Thanks again for your work and for considering these requests.
16. Februar 2012 um 12:09 Uhr
By now it is not planned to integrate speed profile or heartrate. Customisation is possible via CSS. To change from column- to line graph you have to change the request inside “js/gmap_v3_elevation.php” on line 74. Is your last issue in conjunction with a wp-theme containing “ePanel”?
20. Februar 2012 um 19:58 Uhr
Hi
Thanks for this excellent plugin
I’m trying to add this WMS without success:
http://idecan2.grafcan.es/ServicioWMS/MT5?REQUEST=GetMap&FORMAT=image/png&LAYERS=WMS_MT5&VERSION=1.1.1
Can you help?
21. Februar 2012 um 11:21 Uhr
There is nothing to do for me, simply put this link into the “Settings->Google Maps->WMS->URL” field, change “Name” and “Copyright” to your needs and push the save button.
Inside the map go to the Canaries and change the Maptype to what you have inserted into the name-field – works fine for me!
21. Februar 2012 um 17:01 Uhr
Thank you for your quick respnse, that’s exactly what I did. I am displaying a gpx file on the map, it works fine with OSM, OSM Cycle, Satellite and Road. When I select the WMS whose name appears correctly in the box the viewer window becomes blank. When I click and move the cursor inside the window, the OSM map sometimes appears at a smaller scale and the zoom keys are inactive.
21. Februar 2012 um 19:26 Uhr
change zoom min to 20
and zoom max to 5
21. Februar 2012 um 19:27 Uhr
Thanks to your instructions, everything now works fine; this app is great. I particularly appreciated how fast you reacted to solve the problem