Exciting News! Flipper Code is now WePlugins! Same commitment to excellence, brand new identity.

Display Json data on Google Maps

Sandeep Kumar Mishra
Sandeep Kumar Mishra
August 31, 2024
5 minutes read

With JSON Data on Google Maps addon, site admins can display JSON data on Google Maps very easily and with flexibility. Site admin just needs to upload a JSON file in the backend and then he/she needs to do the mapping that will decide what will be served as title, content, and images in the infowindow and listing from the JSON file.

Please make sure you have installed the WP MAPS PRO plugin on your website. In case you have not installed it yet. Please download these plugins and configure them first. Here are the following steps to install the WP MAPS PRO plugin.

Process to configure JSON Data On maps plugin:

  1. Step 1: Please navigate to the WP MAPS PRO -> JSON File To Map
  2. Step 2: Please select your map from the given Select Map dropdown to add locations on a map.
  3. Step 3: After selecting a map you will see one more option Choose JSON File is visible here, please upload a JSON file.
    json to google map settings
  4. Step 4: When you upload a JSON file, all the columns associated with it appear below with some dropdown. Select associated location field data from the given dropdown in front of a table field.
    json to google map mapping
  5. Step 5: After selecting the associated location field from the given dropdown in front of a table field, click on Save Settings.

    Note: Title, Latitude, and Longitude are required for mapping. You can use Extra Fields and Category for multiple column mapping.

  6. Step 6: Please edit a specific map from the map listing page edit the selected map and scroll down to the JSON To Google Maps (Addon Settings).
  7. Step 7: Enable Enable JSON Locations checkbox from JSON To Google Maps (Addon Settings) given section.
    json to google map enable
  8. Step 8: After enabling this add-on please click on Save Map.

You can see your uploaded JSON data is displayed on a selected map.

json to google map example

To view a demo please click here.

Explore the latest in WordPress

Trying to stay on top of it all? Get the best tools, resources and inspiration sent to your inbox every Wednesday.