Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Ian Mackenzie
Ian Mackenzie
11,062 Points
Posted by Ian Mackenzie
Ian Mackenzie
11,062 Points

Recreate clickable map that links to different pages of a website

I need to recreate a simple map just showing one main hwy and 6 towns along the route each linked to a different page of a website.

Can you use google maps and make different points along the way link to separate pages of a website.

Or would I be better to create that section of the map in illustrator and then use that as an image map on my site.

Or is there a way of using css so I don't have to use an image map at all?

2 Answers

Brian MacDonald
Brian MacDonald
4,951 Points
Brian MacDonald
Brian MacDonald
4,951 Points

Good afternoon Ian,

So looking at your question I am understanding the following - you need a single map background with 6 markers of different locations linking to separate pages?

Google maps has an amazing selection of tools in there API for developing maps easily with certain marker points. Each of these points can be linked to info, pages, and much more depending on your overall goal.

Now point 2 about using illustrator to develop your map - you could design some pretty cool looking map in illustrator, as well as markers. The most difficult part will be aligning your markers on the certain points of the map. It is definitely a viable option as well, using relative div structure and positioning your markers absolutely on to the map could achieve this layout.

Both options are possibilities! It all depends on what your current goal is - Google has setup a great API for your disposal, but everyone enjoys taking on a good development project as well!

I hope this information is useful, have a great day.

Ian Mackenzie
Ian Mackenzie
11,062 Points
Ian Mackenzie
Ian Mackenzie
11,062 Points

Hi Brian,

Thank you for your response.

I like the idea of using map background and using relative and absolute divs for the markers as I want to create low tech, less time consuming option at first to see how it goes.

I'll start looking into and learning the API capabilities on Google Maps, does this require Javascript or other programming knowledge to implement.

I've come across another solution too, mapbox that I'll look into.