Google Interactive Maps

Responsive WordPress Plugin

April 29, 2014

Interactive Map of United States

Interactive Map of United States, created with Google Interactive Maps WordPress plugin.

Interactive Map of United States for WordPress. Here we use advanced customization, similar to Interactive World Map with Countries. For example, our destination here is to create Google map of United States, onclick of which active states will display current active state’s map (for each US state will show its map).

We create 7  maps:

1. Interactive Map of United States with active color states (with id=’35’) – this is the main map!,

2. Interactive Map of Florida (with id=’34’),

3. Interactive Map of Pennsylvania  (with id=’33’),

4. Interactive Map of Illinois  (with id=’32’),

5. Interactive Map of New York (with id=’31’),

6. Interactive Map of Texas (with id=’30’),

7. Interactive Map of California (with id=’29’).

To show interactive maps, in current post we add following html text (in TEXT mode):

 

<div id=”us_main_map” style=”opacity: 0;”><input class=”button” style=”padding: 2px; cursor: pointer; text-shadow: none; background: none repeat scroll 0% 0% rgb(214, 228, 255);” type=”submit” value=”Back to USA map” onclick=”jQuery(‘.us_states_map’).css({‘opacity’:0,’height’:0});jQuery(‘#states_map’).css({‘opacity’:1,’height’:’auto’});jQuery(‘#us_main_map’).css(‘opacity’,0);” /></div> => This is the button, onclick of which we will get back to main map. By default, it’s hidden (opacity: 0).

<div id=”states_map” class=”us_states_map” style=”text-align: justify; overflow: hidden;”>[gima p id=’35’]</div>=> This is main USA interactive map with states. By default, we will display this map.

<div id=”florida_map” class=”us_states_map” style=”opacity: 0; height: 0px; text-align: justify; overflow: hidden;”>[gima p id=’34’]</div>
<div id=”pennsylvania_map” class=”us_states_map” style=”opacity: 0; height: 0px; text-align: justify; overflow: hidden;”>[gi ma p id=’33’]</div>
<div id=”illinois_map” class=”us_states_map” style=”opacity: 0; height: 0px; text-align: justify; overflow: hidden;”>[gima p id=’32’]</div>
<div id=”new_york_map” class=”us_states_map” style=”opacity: 0; height: 0px; text-align: justify; overflow: hidden;”>[g imap id=’31’]</div>
<div id=”texas_map” class=”us_states_map” style=”opacity: 0; height: 0px; text-align: justify; overflow: hidden;”>[gim ap id=’30’]</div>
<div id=”california_map” class=”us_states_map” style=”opacity: 0; height: 0px; text-align: justify; overflow: hidden;”>[gima p id=’29’]</div>=> This are USA States maps, each state is in its container div. By default, the divs are hidden (opacity:0, height:0)

This means, we create div containers for each map, hidden all but first container, which will show US interactive Map. We hide divs using opacity:0 and height:0 and overflow:hidden. Don’t use    display:none, as this  necessary for responsiveness of the maps, and don’t use visibility:hidden , as opera till 12 version has bug.

Besides, we create an input button, onclick of which we hide all maps,  and show world map (add all these data in Text mode, not in Visual mode).

For each Google map of US states we set its data. For example, below is data for Florida interactive map:

Interactive Map of US Florida Settings

 

And for main Interactive United States map we set  Active region Action – Self Action.

Active self action

This means that onclick of any active region on the map, will be generated (executed) data, contained in current region’s Action textarea. For example, we can add for one state –     alert(“something”);    , for another state we can add  –    window.open(“http://www.edarco.net”);  – to open URL in new window.

For our main USA interactive map we add following data in Action textarea:

1. For California ->

jQuery(‘#states_map’).css({‘opacity’:0,’height’:0});jQuery(‘#california_map,#us_main_map’).css({‘opacity’:1,’height’:’auto’});

2. For Texas ->

jQuery(‘#states_map’).css({‘opacity’:0,’height’:0});jQuery(‘#texas_map,#us_main_map’).css({‘opacity’:1,’height’:’auto’});

3. For New York->

jQuery(‘#states_map’).css({‘opacity’:0,’height’:0});jQuery(‘#new_york_map,#us_main_map’).css({‘opacity’:1,’height’:’auto’});

4. For Illinois ->

jQuery(‘#states_map’).css({‘opacity’:0,’height’:0});jQuery(‘#illinois_map,#us_main_map’).css({‘opacity’:1,’height’:’auto’});

5.ForPennsylvania->

jQuery(‘#states_map’).css({‘opacity’:0,’height’:0});jQuery(‘#pennsylvania_map,#us_main_map’).css({‘opacity’:1,’height’:’auto’});

6. For Florida ->

jQuery(‘#states_map’).css({‘opacity’:0,’height’:0});jQuery(‘#florida_map,#us_main_map’).css({‘opacity’:1,’height’:’auto’});

This means, for example, on click of Texas state, will hide Current USA interactive map, and will show Texas interactive map.

Interactive Map of United States Settings

Interactive Map of United States remains Responsive, you can narrow browser to check it!

This demo map is created with Google Interactive Maps WordPress plugin, which let’s you create unlimited responsive interactive maps (Interactive World Maps, Europe Interactive Maps, Interactive US Maps, Africa Interactive Maps, Germany Interactive Maps, Interactive Maps of Canada and map of any other continent, country and US state).

Each map can be used multiple times in different posts and pages. Active data is shown in two ways: as fully colored Region, or Marker with colored bubble. Each active region can have: Tooltip on hover and an Action on click. Both tooltip and action values can have HTML text and images.

Plugin is based on Google GeoChart API, all necessary country and province data is included. Plugin enables to Zoom maps with mouse scroll and drag them. It creates SVG maps (No Flash).