How to make an interactive city map without Flash

Question

So I've looked at all the previous questions asked and found that nothing was answered to the point of what most are asking and I would like to rephrase the question asked about making clickable maps.

The idea - Have a map of a singular city in the USA that I could use jquery to outline the towns inside said city. I would then like to be able to go into further detail of said town showing things like shopping centers, parks, street names, available housing, etc.

I could use the map detail I received from the city to draw/outline all these small sections from a vector file I have.

This doesn't necessarily have to remain on the same page but it would be nice if it did.

If this could be too expensive hiring someone or too long to sit and code for one person, then my next option would be using Google Maps. Now I know that Google Maps doesn't have the most up-to-date visuals so I was wondering if it was possible to set up all my own markers and possibly pictures of locations if they don't exist on Google?

The Result - A custom map that's somewhat reminiscent to that of Google Maps only without the hassle of Google Maps itself and if there was a search option for the map using Google Maps as a last resort I wouldn't want the search results to display anything but locations within the city limits.

Or should I just use DreamWeaver to hot-spot a map that each link to their respective location details?

These are similar examples I've found but most are just hover and click but nothing further. http://davidlynch.org/projects/maphilight/docs/demo_usa.html

http://exploregooglemaps.blogspot.com.br/p/resources.html

Answer 1

there is a great plugin doing that, it is jvectormap :

http://jvectormap.com/

it is very lightweight & cross browser (vml is used for non svg support) & very easily extensible (which imo is better than have a plugin full of option you don't need, here it has the minimum then you add what you need) through on click, on mouse over call back to start with & that shall be enough for most cases.

lightweight if you convert your map correctly (limit to the max the level of details). now the conversion of the vector map for use by the plugin can be tricky but there is a wiki about it :

https://github.com/datag/jvectormap/wiki/Map-converter-notes

i've redacted the part of the wiki about using GIS software on ubuntu. using SAGA-GIS was indeed a saviour & a good thing to learn to publish any map for the plugin in no time.

I'll add that i've tested anymap from anychart & fusionmap from fusioncharts and that imo jvector is the winner without any contest for cross-browser/customisation ease/flexibility/bandwidth/execution efficiency... & last but not least it is free !