Customizing the Contact Widget Map

Dev Tutorials

Last Updated: Time to Read: 2 minutes

By default, our designer chose to remove as much of the interface as possible for the cleanest look in the Contact  map. Note that the map is zoomable with the mouse wheel.

If you would like to customize the map in any way, you can replace our map code in the widget with your own code, then include the widget in a custom Extension. Note that modifying the widget directly is possible but not at all recommended as it will be overwritten in every update.

There are two primary ways to do this:

Method #1 : For Developers

Use this method if you have some coding experience and need the Map info fields in the page options panel to work.

Method #2: For Novices

Use this method if you really want to customize the map a little, have little or no coding experience, and don’t need the map info to be entered using the widget options.

Method #1:  Google Maps API

The map code is located in core/modules/widgets/contact.php beginning on line 171, with the map itself embedded on line 177 . The first set of variables grabs the information entered in the widget options panel such as the location, and latitude/longitude.

You can customize some aspects of the strings and/or replace the variable values with custom ones (this may render the template option fields inoperable) via the Google Maps API, but Google limits the ways in which you can customize the map. You can learn more about that here:

https://developers.google.com/maps/documentation/staticmaps/#Overview

https://developers.google.com/maps/documentation/staticmaps/#StyledMaps

Note that this is not for the faint of heart!

Method #2: Use a Plugin Or Google Map Code

This method can be much faster and offer a little more in the ways of customizing interface elements, but is limited in that you cannot customize how the map or pin is styled, add functions, or use the contact widget options to enter the location info.

To generate the code, you can use Maps Engine Lite (view help for this feature) or you can use any online Google Map code generator. Once you have your code, replace line 177 (shown above) in contact.php.

You may also use a WordPress plugin such as Google Maps Placemarks or WP Google Maps to build a map and get a custom template tag or shortcode.

To insert a shortcode, use the Content Widget.  Using two columns set to 6 of 12 will allow you to display a contact form next to a custom map in the same way as the Contact Widget.

Of course, there are several Maps plugins with extensive customization options that come with their own widgets. One example is the Google Maps Placemarks plugin.