1. Access the Platform

    Log in to your IDXAddons platform account

    In the main menu, select the IDX Map to Google Maps App option.

  2. Configuring the Google Maps API Key Initial View of the App
    • When you enter the app, you will see an option to configure the Google Maps API Key.
    • If you haven’t entered it yet, click on the following link: API KEY to go to the settings page.
    Setting Up the API Key
    • On the API Keys page, find the field labeled Google Maps and enter the corresponding API Key.
    • The system will automatically verify if the API Key is valid. If it is not, a pop-up will appear with an error message. If it is valid, you can click the Save button to save the configuration.
  3. Securing Your API Key (Required)

    Your Google Maps API key is visible in your website's source code — this is normal and by design. However, if you don't restrict it, anyone can copy your key and use it on their own website, and Google will charge your billing account for their usage.

    You must configure two types of restrictions in the Google Cloud Console:

    Step 1: Restrict by Website Domain
    1. Go to the Google Cloud Console > Credentials page.
    2. Click on your API key to edit it.
    3. Under "Application restrictions", select "Website restrictions".
    4. Click "Add" and enter your authorized domains. You need to add both your main domain and any subdomains:
      • yourdomain.com/*
      • *.yourdomain.com/*

      For example, if your website is beckysellsmiami.com and you also use listings.beckysellsmiami.com, you would add:

      • beckysellsmiami.com/*
      • *.beckysellsmiami.com/*
    5. Click "Save". Only requests coming from these domains will be allowed.
    Step 2: Restrict by API Service
    1. On the same API key edit page, scroll down to "API restrictions".
    2. Select "Restrict key".
    3. From the dropdown, select only the APIs your website needs:
      • Maps JavaScript API
      • Places API
    4. Click "Save". This prevents your key from being used with other, more expensive Google APIs.

    What happens if you don't restrict your key?

    • Anyone can find your key in your website's source code and use it on their own sites.
    • Google bills by API key, not by domain — all usage charges go to your account regardless of where the requests come from.
    • There is no automatic spending limit unless you set up budget alerts or quotas in Google Cloud.
    • Unauthorized usage can exhaust your daily quota and cause your own maps to stop working.

    If your key was previously unrestricted: We recommend generating a new API key and deleting the old one. Restricting the old key blocks unauthorized use going forward, but anyone who has a copy of it could still attempt to use it. Rotating to a new key ensures full protection. You can do this in the Google Cloud Console.

  4. Setup Tab

    In the Setup tab, you will find a toggle button that allows you to enable or disable the Google Maps service. When you activate or deactivate the service, a message will appear indicating that the update was successful.

    Explore Styles for Your Map
    • Locate the "Explore Styles for Your Maps" button.
    • Click the button, and a pop-up window will open with several options to customize your map.
    • In the pop-up window, you will find a select dropdown with three options: Explore, Styles, and Favorites.
    • Choose the style you like best, and then click the Continue button to automatically apply the selected style to your map.

    When the information is saved, the selected option will appear in the main view.

  5. Map Pins Tab

    In the Map Pins tab, you will find several settings related to the markers on the map for listings.

    • Active Listings:You can use the Default marker or set a Custom Marker URL.
    • Sold Listings:You can use the Default marker or set a Custom Marker URL.
    • Featured Listings:You can use the Default marker or set a Custom Marker URL.