Docs Archive - Page 5 of 12 - WP Maps Pro

#1 WordPress Map Plugin for Store Locator, Business Listing, Event Locator and many more.

Download Now

Archives: Docs

WP MAPS PRO Version 4.0.0 included an awesome functionality to Export/Import Maps from one site to another site. With the help of this feature, you can easily set up or create a map from one site to another site in a few seconds. In this tutorial, we’ll help you how to migrate map settings from one site to another site.

Export/Import map from one site to another

Step 1 Go to Manage Map > Edit Page of WP MAPS PRO. (For example, the site is http://www.flippercode.com/)

Step 2 Scroll down the page at the end to the Import Settings section.

Step 3 Copy JSON code from the Export code box to migrate map settings from one site to another site.

How to export/import the map from one site to another site

Step 4 Then go to the new other site and navigate to the dashboard where you want to import the map. (For example, another site is https://wpgmp.flippercode.com)

Step 5 Go to WP MAPS PRO > Add Map Page.

Step 6 Paste the JSON code Import code box under the Import Settings section to overwrite map settings.

Export/Import map from one site to another Wpmapspro

Step 7 At the end click Save Map.

Now you’ll see you get the map with all settings according to the previous site.

In our WP MAPS PRO plugin, you can customize infowindow with width, border color, border radius, and background color. In this tutorial, we’ll help you how to customize or change the color of infowindow.

Updates – In the 5.0.0 version, we have introduced readymade infowindow skins. It is highly recommended that use one of the readymade skins.

Customize infowindow in Google map

Step 1 Go to Add Map or Manage Maps > Edit Map.

Step 2 Scroll down to Infowindow Customization Settings section and enable the Turn On Infowindow Customization checkbox.

Step 3 Configure the infowindow height, Border Color, Border Radius, and Background Color.

How to customize info window in Google Maps

Step 4 Then click Save Map. Now you’ll see infowindow color display according to your customization.

Customize infowindow in WP MAPS PRO

We’ve introduce display custom control functionality in Google Map Pro Version 4.0.0. Now you can display any custom control text or html that you want to display in your google map. You can also set the position of custom control on map.

Display Custom Control In Google Map

Step 1 Go to Add Map or Edit Map Page.

Step 2 Scroll down page and point to ‘Custom Control(s) Settings’ section.

Step 3 To apply custom control, Turn On Custom Control box.

Step 4 Then Paste HTML or text that you want to show on map and select custom control position.

How to display custom controls in Google Maps

Step 5 Click to save map, and open it in browser.You’ll see applied custom control display in your selected position.

Display custom control in google map Wpmapspro

We have included 15 color schemas which gives you new user experience in tabs and listings. You can also create your own schema according to your choice.

Apply color schema in google map tab and listing

Step 1 Go to Manage Map -> Edit page.

Step 2 Scroll down page and point to ‘Design Settings’ section.

Step 3 Then enable Apply Custom Design to apply the color schema.

Step 4 Change font size and select color for tab and listing according to your need.

Apply color schema in google map tab and listing

OR

Step 5 If you want to apply own schema color then enable the box Apply Own Schema.

Color schemas in your Google Maps tabs & listing

Step 6 The click Save Map and open it in browser you’ll see map tab and listing display in your selected color.

How to apply color schemas in your Google Maps tabs & listing WP Maps Pro

Wp google map have a functionality to use the Screen-specific settings when you’re nearing the end of active development and want to perfect how your site looks like on specific mobiles (e.g. a certain ipads or smartphones) and insert width, height and zoom level according to specific screen size.

Display map according to specific screen size

Step 1 Go to Add or Manage Map Page.

Step 2 Scroll down page and navigate to ‘Screens Specific Setting’ section.

Step 3 Then enter width, height and zoom level for different devices.

Display map according to specific screen size Wpmapsrpo

Step 4 Click save map and view in different devices.

How to Display Map according to specific Screen SizeHow to Display Map according to specific Screen Size

In our WP MAPS PRO Pro plugin, we have several parameters by which we can filter and modify the map. In this tutorial, we will see what parameters we have and how we can use these parameters to modify the map. Sometimes we use the same shortcode on multiple pages and want to modify the selected page’s map, here we just need to pass these parameters in the map shortcode.

Filter And Modify The Map Using  Given Parameters

These are the following parameters we can use in the shortcode:

  • category
  • limit
  • perpage
  • hide_map=true
  • map_only=true
  • Zoom
  • show_all_locations=true
  • width
  • Height

1. Filter Map By Category:

If your map has many categories and you want to show only the selected category in the map, then pass this “category=category name” parameter in the map shortcode.

Example: [put_wpgm id=1 category=Beach]

After saving this shortcode your map looks like below given image.

2. Display Limited Location On Map:

If your map has many locations and you want to show limited locations on the map pass this “limit=number” parameter in the map shortcode.

Example: [put_wpgm id= 1 limit=2]

After saving this shortcode your map looks like below given image.

3. Display Number Of Locations Per Page :

Using this parameter you can set how many locations displayed per page in the map listing. Please pass this “perpage=number” parameter as given below example.

Example: [put_wpgm id=1 perpage=2]

After saving this shortcode your map looks like below given image.

 

4. Hide Map :

Using this parameter you can hide the map and display only location listing on the frontend, Sometimes we use the same shortcode on multiple pages and want to hide the map and show only listing on the selected page. you just need to pass this “hide_map= true” parameter on the selected page’s shortcode.

Example: [put_wpgm id=1 hide_map=true ]

After saving this shortcode your map looks like below given image.

5. Display Only The Map:

Using this parameter you can hide the location listing and display the only map on the frontend, Sometimes we use the same shortcode on multiple pages and location listing is enabled so want to hide the listing and display the only map on the selected page. you just need to pass this “map_only= true” parameter on the selected page’s shortcode.

Example: [put_wpgm id=1 map_only=true ]

After saving this shortcode your map looks like below given image.

6. Set Map Zoom Level

Using this parameter you can set the map’s zoom level of the particular page. Please pass this “zoom” parameter as given below example.

Example: [put_wpgm id=1 zoom=5]

After saving this shortcode your map looks like below given image.

7. Show All Location:

Using this “show_all_locations=true” parameter, you can display all the locations that you have not assigned to that map, but want to appear on the same map on a particular page.

Example: [put_wpgm id=1 show_all_locations=true]

After saving this shortcode your map looks like below given image.

 

8. Change Map Width:

Using this parameter you can change the map width as per your requirement. Please pass this “width=number” parameter as given below example.

Example: [put_wpgm id=1 width=350]

After saving this shortcode your map looks like below given image.

9. Change Map height:

Using this parameter you can change the map height as per your requirement. Please pass this “height=number” parameter as given below example.

Example: [put_wpgm id=1 height=300]

After saving this shortcode your map looks like below given image.

 

In our WP MAPS PRO Pro plugin, we can display a single location post dynamically on the map. We can create a single post location dynamically by using a shortcode parameter. This tutorial is to help you to display your single post location which is assigned via google maps metabox as the location on google maps.

Step 1 Please go to the ‘Add/Edit Post’ page, in the content area enter the map shortcode and insert this given parameter current_post_only=true in the map shortcode like as below given example image to display the meta box assigned a location on google maps.

Step 2 please scroll down to the ‘WP MAPS PRO’ meta box in this edit post page, select location from the given “Enter Location” textbox.

Step 3 After selecting the location please select the map from the ‘Select Map’ given option which you created recently for this post location.

Step 4 After this small process please save this post.

Please go to this post page and you will see the map is showing with the location which is assigned by Google Maps Metabox.

 

Poedit is a software which you can use to translate language of your plugin content or theme. ‘English(United States)’ is default language for wordpress but you can change its language easily in following steps. Here is complete list of Languages Codes and Country Codes.

Change language of your plugin content

  1. Step To change languages of your plugin contents , we use poedit software.
  2. Step  Open Poedit and click on “File/Open…” and Select the .POT file or the .PO file from the plugin you wish to translate which (you can find the files in the wp-content/your-plugin-path/language/ folder).
  3. Step  Now you have to change the language file for your language.Then go to catalog menu-> Properties file.
  4. Step  A box will pop up asking for language of the translation. Select your language and click ok.
  5. Step  Now you can start translating your plugin content- just go through every line of text and translate it to your native language.
  6. Step  When you’ve finised save your file with your language code (for example de_DE.po). Poedit will automatically create both .po and .mo files.
  7. Step  Upload the file to your /languages folder : Below is screenshot of .po and .mo files for German languages. Upload your files to the languages folder you just created. For e.g ‘wp-content/your-plugin-path/languages or lang’ folder.
  8. Step  Change the language in the admin settings : Then switch your wordpress dashboard and go to Settings -> General -> “Site Language” setting.
  9. Step  Select the language option corresponding to the .mo file you just uploaded and click on Save Changes.
  10. Step Refresh your page and you should see your plugin contents in German language.

To show geographical data overlaid on a map, you can use a GEO JSON URL. This will allow you to add points of interest, lines, and other shapes directly to the map. The data used in this setting is typically stored in the GeoJSON format. You can find it in our documentation about the GeoJSON data layer. Make sure to check out the detailed information related to this geo-data layer, as well as its URL or Uniform Resource Locator!

Insert GEO JSON URL

Step 1 Go to Add or Edit Map and scroll down to ‘GEOJSON’ section below of the page.

Step 2 Paste your GEO Json url.

Insert GEO JSON URL Wpmapspro

Step 3 Click on Save Map and open it in browser.
you’ll see the output at per attached screenshot.

How to insert GEO JSON URL Wpmapspro

What are POV Heading and Pitch in Google Maps Street View? POV (Point of View) Heading and Pitch are parameters that control the direction and angle of the Street View image. Heading is the direction in which the camera is pointing while pitch represents the up/down angle at which the street view is taken. These parameters can be changed through Google Maps Street View Service tutorial to customize your Street View images.

 

Step 1 Go to Add or Edit Map page and scroll down to ‘Street View Settings’ section.

Step 2 Enable ‘Turn On Street View’ option.

Step 3 Then Enter the ‘POV Heading‘ and ‘POV Pitch‘.

Step 4 Click on Save Map and open it in browser.

What are POV heading and POV pitch in Street View Wpmapspro

Street View Settings Pov Image

Install Plugin Now!

This plugin is exclusively available at codecanyon.net. You'll get free updates and full support to use this plugin.