Creating a Google Maps Map ID

PLUS A map ID is an identifier under which Google stores your map style and your map’s configuration in the cloud. You therefore no longer design the map in your website’s program code, but in the Google Cloud Console — your website only passes on the map ID. Since 2024, Google manages custom Google map styles exclusively this way; the older style JSON is no longer supported by Google together with the current map markers.

What WP-ImmoMakler uses the map ID for

• Custom map style: The colours, labels and points of interest shown on your maps.
• Postcode area highlighting: The coloured area WP-ImmoMakler draws instead of a radius when a property has no exact address. This feature requires a map ID with the matching feature layers enabled — see Enabling postcode areas.
• Static maps: The map ID is also passed on to the consent box preview image and to the maps in PDF exposés.

As long as you do not add your own map ID, WP-ImmoMakler draws the maps with a bundled map ID in Google’s default style. So you don’t need to set anything up as long as you are happy with the default look and don’t want to highlight postcode areas.

Requirements

• A Google Cloud project with a linked billing account and the Maps JavaScript API enabled — see Creating Google Maps API Keys.
• You need the Editor or Owner role in this project, otherwise you cannot create a map ID.
• The map ID and the API key must be in the same Google Cloud project. Google will not accept a map ID from a different project — this is the most common cause of a map that stays grey after the map ID has been entered.

Creating a map ID

1. Open Map Management

   Open the Map Management page in the Google Cloud Console and select your project at the top — the same project your Google Maps API keys live in.

2. Create a map ID

   Click Create map ID and fill in the form:

   • Name: a descriptive name, for example your website’s name.
   • Description (optional): what the map ID is for.
   • Map type: JavaScript. This is the platform WP-ImmoMakler uses to draw the maps in your visitors’ browsers.
   • Rendering type: Vector. Postcode area highlighting only works with vector maps; the Raster option is Google’s default, but cannot draw these areas.

   You can leave the Tilt and Rotation options enabled or disabled — WP-ImmoMakler uses neither.

3. Save

   Click Save. The map ID then appears in the list as a string of letters and digits. You will enter this value in WP-ImmoMakler later.

Creating and linking a map style

A freshly created map ID initially shows Google’s default style. You define your own look in a map style, which you then link to the map ID.

1. Create a style

   Open the Map Styles page and click Create style. Choose one of Google’s styles as a starting point (Light or Dark, optionally Monochrome) and click Customize to edit colours, labels and the visibility of individual map elements such as points of interest.

2. Save the style

   Click Save and, in the Save and publish map style dialog, give it a name and, optionally, a description.

3. Link the style to the map ID

   Go back to Map Management and open your map ID. Click Edit in the Map styles section, choose your style, confirm with Done and save.

Note

Changes to a map style automatically apply to every map ID linked to it — you don’t need to change anything on your website. According to Google, it can take a few hours before the changes show up on your maps.

Enabling postcode areas

The coloured highlighting of postcode areas is not drawn by WP-ImmoMakler, but by Google itself: the areas come from Google’s so-called feature layers, which you enable per map style. WP-ImmoMakler only specifies which areas should be coloured.

1. Add feature layers

   Open your style on the Map Styles page and expand the Feature layers selector. Enable:

   • Postal code (POSTAL_CODE) — for properties for which only the postcode area is known.
   • Locality (LOCALITY) — for properties for which only the locality is known.

   Enable only these two layers. Every additional layer costs loading time without WP-ImmoMakler making use of it.

2. Save

   Click Save. Enabling a layer applies to the map style, not to the map ID — so it only takes effect once the style is linked to your map ID as described above.

Not available in every country

Google only provides area boundaries for some countries. Germany offers both postcode areas and localities, Switzerland only postcode areas, and Austria neither. In countries without coverage, the highlighting stays off and WP-ImmoMakler draws the radius for an approximate location instead.

Note

Feature layers can only be enabled in a light map style. If you want to use a dark style, also link a light style with enabled layers to the same map ID — the layers are then also available to the dark style.

Adding the map ID to WP-ImmoMakler

1. Enter the map ID

   Enter the map ID in the backend of your website (wp-admin) under WP-ImmoMakler → Integrations → Maps, in the Google Maps Map ID (Map ID) field, and save. On the same page, under Map display test, you will find a test map drawn with exactly the settings that also apply on your website.

2. Choose Google Maps as the map provider

   The highlighting is only available with Google Maps. Check in the Customizer under WP-ImmoMakler → Maps that Map provider is set to Google Maps.

3. Enable the highlighting

   Enable the Highlight postcode areas option in the Customizer under WP-ImmoMakler → Maps. The area is coloured in your marker colour, and the map zooms out far enough to show the whole area.

4. Make sure geocoding runs through Google

   WP-ImmoMakler determines which area belongs to a property from Google’s geocoding when the property is saved; existing properties are backfilled gradually in the background. Make sure under WP-ImmoMakler → Integrations → Geo Services that Google is set as the geocoding service and that the server-side API key is entered. Other geocoding services do not supply the Google area identifier this requires.

Effect on the preview image and PDF maps

As soon as a map ID is stored, WP-ImmoMakler also sends it to the static maps — the consent box preview image and the maps in PDF exposés. Their look then comes from your map style: the Map type setting and the greyscale colouring no longer apply there. Google also ties every map ID to exactly one map type when it is created. After saving, check the preview image and a PDF exposé as well as the map itself.

If the highlighting does not appear

If the semi-transparent radius still appears on the detail page instead of the coloured area, work through these points in order:

• Is the map ID in the same Google Cloud project as your browser-side API key?
• Is the map ID’s rendering type Vector and not Raster? If not, create a map ID with the rendering type Vector and enter that one instead.
• Is the map style with the enabled feature layers actually linked to this map ID?
• Is the property in a country for which Google provides the areas (see above)?
• Does the property have an approximate location at all? For a property with a full address, the map deliberately shows only the marker — then neither a radius nor an area is visible.
• Was the change to the map style made less than a few hours ago? Google’s style changes take time to roll out everywhere.

If your map cannot find the enabled layer, WP-ImmoMakler falls back to drawing the radius instead — so the map stays usable in every case.

You might also be interested in

• Creating Google Maps API Keys
• Property maps
• Geo Services
• Using WP-ImmoMakler with Complianz