How to install?

Download

Download Map Wiz plugin from CodeCanyon.

Login

Login your wordpress admin.

Upload Plugin

Upload the Map Wiz Plugin using wordpress admin.

1- Click on Plugins -> Add New.

mapwiz

2- Click on Upload Plugin.

mapwiz

3- Click on “Browse” button and select the downloaded plugin.

mapwiz

4- Click on “install now” button.

mapwiz

5- Click on “Activate Plugin”.

mapwiz

6- Plugin has been activated.

mapwiz

Add Shortcode in Pages / Posts

Add Shortcode in pages

If you have not downloaded the “Map Wiz” plugin then you have to follow the points of Installation, otherwise login your wordpress admin.

1- Go to Map Wiz.

mapwiz

2- Go to Create Map.

mapwiz

3- Input field with placeholder "Map Title" will show, write the map title and click the save button.

mapwiz

4- Map has been created, click on 1st icon of right menu and click on “Dashboard” button.

mapwiz mapwiz

5- Click on pages -> Add new

mapwiz

6-Write the title of page according to your choice and paste that “shortcode” in editor.

mapwiz

7- Click on “Publish” button.

mapwiz

8- Click on “View page” link.

mapwiz

9- Map will appear on your page where you paste the shortcode.

mapwiz

Add shortcode in posts.

If you have not downloaded the “Map Wiz” plugin then you have to follow the first three points of Installation, otherwise login your wordpress admin.

1- Go to Map Wiz.

mapwiz

2- Go to Create Map.

mapwiz

3- Input field with placeholder "Map Title" will show, write the map title and click the save button.

mapwiz

4- Map has been created, click on 1st icon of right menu and click on “Dashboard” button.

mapwiz mapwiz

5- Click on posts -> Add new

mapwiz

6- Write the title of post according to your choice and paste that “shortcode” in editor.

mapwiz

7- Click on “Publish” button.

mapwiz

8- Click on “view post” link.

mapwiz

9- Map will appear on your post.

mapwiz

How to customize styler?

1- Map is shown, click on 2nd icon in right menu of map.

styler

2- Click on “Add Styler”.

styler

3- You will see styler’s properties.

styler

4- Now you can

  1. Select “Feature Type” value from dropdown options
  2. Select “element type” value from dropdown options
  3. Select “visibility” value from dropdown options
  4. Select “invert lightness” value from dropdown options
  5. Set color value
  6. Set weight value
  7. Set hue value
  8. Set saturation value
  9. Set lightness value
  10. Set gamma value
styler

5- Map will auto save the changes that you will make in styler.

styler

6- You can also enable/disable styler's properties by clicking on icon near 'Administrative' text.

styler

7- Click on icon near 'Administrative' text. Styler's properties will be disabled from map.

styler

How to customize marker?

1- Map is shown, click on 3rd icon in right menu of map.

styler

2- Click on “Add Marker”.

styler

3- You will see three tabs named as “Marker, Shapes and Window”.

a) In “Marker” tab, you can

  1. Set your position of marker by putting values in latitude and longitude according to your choice.
  2. Or you can also “find your location”.
  3. You can also enable “Make this marker as primary”.
  4. You can also enable Tooltip.
styler

b) Click on “Shapes” tab

  1. You can also change the shape of marker from “Svg Shapes (Customizable)”option according to your choice.
  2. Change stroke color & weight.
  3. You can also add Marker Icon from dropdown options.
styler

By selecting “Font Icon”

  1. You can search icon from the list of icons.
  2. You can select any icon from the list of icons.
  3. You can also change the color of font icon.
  4. You can also set it's horizontal position.
  5. You can also set it's vertical position.
  6. You can also change the size of font icon.
styler

By selecting “Image”

  1. You can also set it's horizontal position.
  2. You can also set it's vertical position.
  3. You can also change the size of image.
  4. You can only upload png image.
styler

OR

You can also upload png image.

mapwiz

c) In this scenario, “Svg Shapes (Customizable)”option is used.

styler

d) You can also enable info window in “Window” tab.

styler

e) Map will auto save the changes that you will make in marker.

styler

f) Click on marker, info window will be shown.

styler

How to Customize Info window?

1- Map is shown, click on 3rd icon in right menu of map.

styler

2- Click on “Add Marker”.

styler

3- You will see Info window with checkbox in “Window” tab, check this checkbox info window will be shown.

styler

4- In info window there are two tabs named as “Header Data and Body Text”.

a) In “Header Data” tab, you can

  1. Enter “Header Title” and “Header BG Image Url”.
  2. Enter “Header Link”.
  3. You can also check “Get Direction” checkbox to get marker direction.
styler

b) In “Body Text” tab, enter “Body Text(H1), Body Text(P) and Website URL”.

styler

c) Map will auto save the changes that you will make in Info window of marker.

styler

Drawing Tools

How to use Drawing Tools?

1- Map is shown, click on 5th icon in right menu of map.

styler

2- Drawing tools are enabled on map.

styler

To use drawing tools,

  1. Click on first icon from right side, now you can draw rectangle.
  2. Click on second icon, now you can draw polygon.
  3. Click on third icon, now you can draw circle.
  4. Click on fourth icon, now you can draw polyline.
  5. To Stop drawing, click on hand icon.
styler

To customize rectangle tool, click on pencil icon.

styler

In rectangle case

  1. You can change Fill Color.
  2. You can change Fill Opacity.
  3. You can change Stroke Color.
  4. You can change Stroke Opacity.
  5. You can change Stroke Weight.
styler

Other shapes can also be customized in that above way.

styler

Controls and Settings

In “Controls and Settings”, there are three tabs.“Display”, “Controls” and “Clustering”.

a) Display

How to change width/height?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see “width & height” in “Display” tab.

styler

3- Just change it’s value according to your choice.

Note: For responsive ratio use “%” and for fixed ratio use “px” in width.

How to change Zoom Level?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see “Zoom (Default)” in “Display” tab.

styler

3- Just select it’s value from dropdown options according to your choice.

styler

How to change Map Type?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see “Map Type” in “Display” tab.

styler

3- Just select it’s value from dropdown options according to your choice.

styler

How to use Localization?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see “Localization” in “Display” tab.

styler

3- Just select it’s value from dropdown options according to your choice and the language of map will be changed.

styler

How to change Bg Color of Map?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see “Bg Color” in “Display” tab.

styler

3- Just change it’s color according to your choice and the background color of map will be changed.

styler

How to change Bg Pattern of Map?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see “Bg Pattern” in “Display” tab.

styler

3- Just change it’s value from dropdown options according to your choice and the background pattern of map will be changed.

styler

b) Controls

How can I enable Zoom Control?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “Zoom Control”.

styler

4- Just select it’s value “standard” from dropdown options. It will be enabled.

styler

Change position of Zoom Control

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see button named as “Controls”. Click this button.

styler

3- You will see “position” under “Zoom Control”.

styler

4- Just select it’s position value from dropdown options according to your choice.

styler

How can I enable Street View?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “Street View”.

styler

4- Just select it’s value “standard” from dropdown options. It will be enabled.

styler

Change position of Street View

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “position” under “Street View”.

styler

4- Just select it’s position value from dropdown options according to your choice.

styler

How can I enable Map Control Type?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “Map Control Type”.

styler

4- Just select it’s value “standard” from dropdown options. It will be enabled.

styler

Change position of Map Control Type

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “position” under “Map Control Type”.

styler

4- Just select it’s position value from dropdown options according to your choice.

styler

How can I disable map draggability?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “Draggable map”.

styler

4- Just select it’s value “none” from dropdown options. It will be disabled.

styler

How can I disable Double Click Zoom?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “Double Click Zoom”.

styler

4- Just select it’s value “standard” from dropdown options. It will be enabled.

styler

How can I disable mouse scroll?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Controls”. Click this tab.

styler

3- You will see “Mouse Scroll”.

styler

4- Just select it’s value “none” from dropdown options. It will be disabled.

styler

c) Clustering

How to customize clustering of markers?

1- Map is shown, click on 6th icon in right menu of map.

styler

2- You will see tab named as “Clustering”. Click this tab.

styler

3- When you will drop markers in near locations, then cluster will become.

styler

4- In “Clustering” tab,

  1. Change the “Style” of cluster markers from dropdown options.
  2. Change “Font Size” from dropdown options.
  3. Change “Font Color” of cluster markers.
styler

5 - Map will auto save the changes that you will make in it.

styler

Search Location

How to search location?

1- Map is shown, click on 7th icon in right menu of map.

styler

2- Search your location in input field.

styler

3- Your desired location will be found.

styler