Google Interactive Maps

Responsive WordPress Plugin

April 22, 2014

World Map with Contact forms

World Map with Contact forms, created with Google Interactive Maps WordPress plugin.

World Map with Contact forms for WordPress. Map uses advanced tecnique. As a contact forms for current example we use Contact form 7 free wordpress plugin.  We create 2 contact forms – one for office in USA and another one for office in Russia. In current post firstly we display our world map created with Google interactive maps plugin and after that in text mode we add following custom divs, containing contact forms shortcodes:

<div id=”us-contact” style=”display:none; border:5px solid #0308B7; margin-top:10px;”>[contact -form -7 id=”483″ title=”Demo USA Contact form”]</div>
<div id=”russia-contact” style=”display:none; border:5px solid #E7172C; margin-top:10px;”>[contact -form -7 id=”484″ title=”Demo Russia Contact form”]</div>

Both container divs are hidden.

In our Google maps plugin we use “Self action” method, when onclick of each active region (or marker) executes jQuery code, contained in action value for current region.

Active self action

We add following data to maps plugin:

For US we add action ->

jQuery(“#russia-contact”).hide();

jQuery(“#us-contact”).show();

jQuery(“#gm41_visb”).css(“border-color”,”#0308B7″);

(this means onclick – hide div form for russia-contact, show div for us-contact, and style map block’s border color itself).

For Russia we add action ->

jQuery(“#us-contact”).hide();

jQuery(“#russia-contact”).show();

jQuery(“#gm41_visb”).css(“border-color”,”#E7172C”);

(this means onclick – hide div form for us-contact, show div for russia-contact, and style map block’s border color itself).

World Map with Contact forms Settings

For additional demo on using of “Self action”, you can look at example of Interactive World Map with Countries.

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).

Comments are closed.