Google Map Widget Tutorial

  1. How does it look?

    When you add the Google Map widget, your clients can search listings in a map like this one:

  2. Map Coordinates

  3. Get the map center coordinates

    This is the first box that shows up in the Google Map Widget:

    After clicking/tapping on the input field, a modal will appear to enter the latitude and longitude.

    Where can I get the Map Center Coordinates?

    We will show you 2 different options to get the map coordinates:

    a) Use

    Go to, type the name of the place to find the lat long coordinates and click on "Find".

    The latitude and longitude will appear below.

    b) Use Google Maps

    You'll need to go to Google Maps and select the location that you'd like to display in the map.

    Next, on the map, right click on the place you want to get the coordinates from. A pop-up menu like this one will show up:

    Click on the first row of the menu that contains the map coordinates. It will be automatically copied to your clipboard.

    Now paste the coordinates in the corresponding input field.

    Click on the Save button.

  4. Map Style

  5. Select a style for your map

    Snazzy Maps is a repository of different color schemes for Google Maps. Click here to get your API Key and create your own styles.

    Click on "Explore other styles for your Map" to retrieve the styles created by other users in Snazzy Maps. You just need to select the one you liked.

    And click on "Continue" to establish this style for your map.

  6. Listings style

    Select the style you'd like the listings to have. The listings can appear in rows or in cards.

  7. Custom CSS

    Customize the CSS of your map and click on the "Save" button.

  8. Code Snippet

  9. Copy and paste the code

    Once you're happy with your selection, click on the "Copy Code" button. The code will be automatically copied to your clipboard. You can now paste it in the section of your page where you want the Google Map Widget to appear.