0

I'm not 100% sure where to start on this one.

I suspect I could use Google GeoMaps and getSelection() but after doing some trials with Google's Code Playground I haven't really gotten anywhere.

My goal
I'm building a support page for a client and they'd like a map on the page, that when you hover over certain states it shows the headquarters for the region in a tooltip. The headquarters are only for regions though, not for every state, so when they hover over Michigan they would like Ohio and Indiana to highlight as well.

Can anyone point me in the right direction? I'm open to any approach I just started with GeoMaps.

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
Vian Esterhuizen
  • 3,788
  • 4
  • 27
  • 37

1 Answers1

2

I'm sure this could be done in multiple frameworks, but one option would be David Lynch's jQuery-based maphilight: http://davidlynch.org/projects/maphilight/docs/.

This creates map highlighting behavior on top of existing HTML image maps. He has an example which uses a map of the US here: http://davidlynch.org/projects/maphilight/docs/demo_usa.html

Let's say you have a few areas that you want to be highlighted together (it's just an example so I've simplified the coordinates):

<area href="#" title="MI" class="hq4" shape="poly" coords="562,99, 564,97, 566,96, 571,92, 573,91, 574,92, 569,97, 565,99, 563,100, 562,99">
<area href="#" title="OH" class="hq4" shape="poly" coords="708,208, 701,212, 697,214, 694,217, 690,221, 687,222, 684,222, 710,226, 708,208">
<area href="#" title="IN" class="hq4" shape="poly" coords="598,311, 597,307, 598,303, 600,300, 602,296, 604,292, 604,287, 602,284, 598,311">

Notice that after the title attribute which specifies the state abbreviation, I've placed a class. maphilight has an option called groupBy which does exactly what you need - it groups multiple areas so that if you hover over one, they all get highlighted. When you initialize maphilight, just set groupBy appropriately and all the states with a common class will highlight together:

$('.map').maphilight({groupBy:"class"});

Note that you don't need to use the map of the US that he provides - you can do this with any image map, and if you have a particular set of state coordinates that you want to use you can just make an image map out of them - just remember to add the same class to those states with a common headquarters.

ASGM
  • 11,051
  • 1
  • 32
  • 53
  • This is perfect. Usually I wait a day before marking as correct answer but as I've already implemented this I will accept it. Thank you very much! – Vian Esterhuizen Mar 14 '13 at 21:10