A weekend project.
An App that downloads gpx file from google maps.
An app that loads the gpx file onto google maps.
how can we achieve that?
- load the gpx file,
- somehow find the start and destination.
- this may not be a good solution since, the gpx file actually has preferred routes that google maps may not use.
- generate the google maps link.
- let the user open the maps link on their device or their laptop.
in terms of SEO, the main keywords we can target are
- google maps to gpx
- gpx to google maps.
But a main point to note is that these keywords are informational, not transactional so its very to make money on them.
The existing competitor is an old product that is outdated, its easier to win but they have a donation link instead, i guess they know its not that monetizable. But this could be an interesting project to explore SEO on — it is fairly simple, doesn’t have existing users to worry about honestly.
some domain names:
1. MapRoutesToGPX.com
2. GPXRouteConverter.com
3. MapToGPXConverter.com
4. GPXExportTool.com
5. RouteToGPX.com — available and seems the best name so far.
6. GPXMapping.com — available.
7. ConvertMapToGPX.com — available and seems nice.
8. GPXFileGenerator.com
9. MapToGPXTool.com — woah nice!
10. GPXRouteExport.com
a name that is memorable and kind of short too.
10-Jan-2024
I got too excited and started working on it immediately. Also I have been managing my working time and off-work time pretty well — its my first week so I feel like I am going good. I started using v0 to build a simple UI but it didn’t really do much, just added a simple Map on the screen — but it was google maps. So I started the Next.JS project (for SEO) and immediately ran into problems. Not me though, it was v0. It had used App router and I wanted to use the Pages Router but it couldn’t run its own code now. What to do.
I just ported the code over to my local project myself — found the library v0 suggested wasn’t being maintained anymore, i literally couldn’t access their docs (probably because they stopped paying their netlify bill).
Switched to a new library which was sort of endorsed by Google Developers themselves. Got the maps running, managed to get the directionsService working but couldn’t display a simple direction from Point A to Point B which is a task for tomorrow.
the app should get the directions somehow, then let the user choose the mode no?
After downloading the GPX file, it should show a popup to rate the application.
its actually stupid to have a map embed right now.
- Map embed maybe free but the navigational feature costs money.
- It makes the whole app a little complicated.
- if we want to get a map that is mobile friendly as well, then a simple google maps to gpx without any map preview might be best no?
That way, we can keep the application in the homepage, making it easily accessible.
I don’t think most users would want to use the mapping tool within the app.
Maybe we can build this in the future if we want to offer something cool or charge????
Also keeping the charges low, we can use some other map provider with the generated GPX file to preview. There are free apps for this.
Yeah that’s better!
Turns out this is much harder since google maps generates a link that doesn’t really store the start and end lat, lng, trying to parse it out is very hard. seems on purpose.
This is the closest thing to figure out the start and end lat lng values but massive amounts of parsing has to be done here to achieve that.
13th Jan 2025.
V1 is ready
I think I had a lot of realizations about what I was trying to do and what should have been done. First of all, I had to tone down that urge to build something complex. Initially the idea was to build an app that allowed me to pick the start and destination and generate the route based on that. While that sounds cool and all, it’s complicated to implement it and also google maps already does that — so why reinvent the wheel?
I thought about it while having my morning meal and decided that the initial design should not be used for now, we should keep it for later if perhaps any user wants it. It was a hard decision but that’s the right one I think. We should not put a lot of work into something that may not have a similar return. Gaze it, judge it and then make the decision to go forward or move on.
But Going from Google Maps Urls to Route was not straight forward, it almost seemed impossible at first because their API didn’t support processing Google Maps App urls. And there wasn’t any existing solution for solving this problem so I spent 4 hours just trying to go through Google Maps Network tabs’ API responses to figure out how they were doing it. How are they parsing this shortened url into this longform? Do they somehow store this in their database somewhere? seemed unnecessarily expensive to do this.
Then Later, I found a stackoverflow where a similar question was asked about google maps url, which turned out to be some sort of obfuscated code that stored info such as start, end, waypoints, type of route etc. I guess it was some sort of an internal encoding mechanism but it seemed kinda weird how they are structured. But after that, I was able to quickly use AI to generate a regex to parse them which didn’t work at first but after a few debugs, I was able to get it right. That solved the Google maps url to coordinates extraction problem.
‣
‣
‣
By the evening, the final design and sort of an implementation was ready. Just functionality was waiting to be done. I think they are simple and straight to the point.
Final Version on the web application and on mobile device. My focus is mainly on mobile devices because no one is going to have a laptop with them all the time, it would defeat the purpose, there are tools available that can do build this. Heck, the Garmin app on desktop is kinda good enough, so much so that I used it to build my routes during my new year trip. But this time, I need something that’s fast, that can get the job done with minimal clicks.
The steps:
- Pick the destination on google maps, copy the link.
- Paste the Link on the app.
- Download the Url or Share it directly to Garmin Connect → Save the route → Load on Device → Ride.
There are steps that are out of my control, I have tried to minimize my steps as much as possible and this is as simple as I can go. I think there is still a lot of detailed work to be done.
- I want to use the framer-motion course animation on this project to build smooth animations here. Its not worth right now but something to try someday.
- The Share button doesn’t work on mobile devices.
- The mobile device, animation from center to bottom is terrible.
- Error handling has to be improved.
- Top Nav bar could be improved as well on mobile device. The kebab styled icon makes more sense right now.
- I don’t know if its worth it but should have a sign page????
- The color scheme has to be done as right now it looks like an ugly Shadcn App which i don’t like.
- On mobile, it should give that mobile App feeling. Need to work on that.
- It still doesn’t support the shortened google maps urls.
- This can be an easy problem since it just redirects to a longer link which is what we’re using to get the coordinates.
Web
Mobile — i did not know that mobile shortened urls are very different from the web ones. Will need to write a different extractor for mobile app.
Working on expanding the shortened google maps link to long-form urls:
Using Google Appsscript for this:
2. URL Fetch (API calls using UrlFetchApp):
• Free account: 20,000 fetches per day.
This limit should be good enough for this project.
Change affiliate Details.
Change general commission terms
Remove general commission terms
Adjust reporting terms
Add Customers
Remove Customer
Add Meters
Remove Meters