Use the widget builder below to create your Google Maps widget for free. Select a template and click “Continue with this template” button to get started.

How to use the Google Maps Widget Generator

1. Choose a template: Select a preferred template and click the “Continue with this template” button. Some templates are Multiple Locations, Single Location, Style Map, Dark Map, Route, Countries, and Infrastructure.
2. Add locations: Click on the “Add Location” button under the Locations section of Content to add your business locations. You can set the name or address in text format or the specific coordinates (latitude and longitude separated by a comma).
3. Location details: Once you have added precise location details for your business, the widget editor has several other options. You can add a description, image, address, website, phone, email, working hours, and icon and also set an action on the marker click.
4. Categories: You can set location categories that will be used as filters in the side panel of the Google Maps web widget. After you’ve created the categories list, you need to set a category for each location.
5. Map settings: In this section, you can change the map type (Roadmap, Satellite, Hybrid, Terrain) and map bounds restriction (this setting reduces how far a user can zoom out, ensuring that everything outside of the restricted bounds stays hidden), controls (zoom, scale, street view, fullscreen, etc.), Layers (POI, Traffic, Transit, Bike, Street View), and the width and height of the Google Map widget.
6. Panel settings: If your Google Maps widget includes multiple locations, you can enable the side panel, which will list all locations, including their details and a search bar to locate a specific one.
7. Change appearance: Under the “Appearance” section, there are several settings to design your Google Maps widget according to your requirements. The Map Styles setting allows you to customize the style of Google Maps using existing options or add your custom Google Maps styles through JSON. Custom CSS and JavaScript fields also allow you to add your styles and tracking codes.
8. Once you’ve customized the widget, click the “Add to website for free” button. This will allow you to add the Google Maps widget to your website at no cost. You will also need to register to save your changes. It’s as easy as copying and pasting. Copy the embed code for the free Google Maps widget and paste it into your website’s HTML editor where you want to showcase it.

The Google Maps widget’s HTML embed code

Insert the embed code into your website’s template, theme, or HTML source code editor where you want the Google Maps widget to appear.

How to manage your Google Maps widget

Once you have created your Google Maps widget for your website, you can easily manage it on your account. In your dashboard, search for the “Google Maps” app under the list of apps. As you can see from the following screenshot, you can create more Google Map widgets, edit existing ones, and get HTML embed code.