Introduction
By default, our designer chose to remove as much of the interface as possible for the cleanest look in the contact template 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 contact.php with your own code. 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 contact page options.
The Solution
This is a Mod
This is considered a modification, so do it at your own risk! Make a backup of your existing file so you can replace it if something goes wrong and you need to start over. Modified files WILL probably be replaced by a theme update at some point so keep note of your changes for future reference or see our guides below. Please note that we cannot assist you with modifying your theme or support problems you encounter as a result!
If you are modifying a theme as part of a client project, the following are really important!
Method #1: Customize Using the Google Maps API
The map code is located in contact.php between lines 14 and 33. The first set of variables grabs the information entered in the page options panel such as the location, latitue/longitude, and the label and address shown when clicking the pin. The map itself is generated by line 19 but depends on the variables on lines 20-31:
<div id="map" rel="<?php echo $location; ?>" <?php if($latlong != "") : ?>data-latlong="<?php echo $latlong; ?>"<?php endif; ?>></div>
You can customize some aspects of the strings and/or replace the variable values with custom ones (this renders 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! If this is a client project, we strongly recommend
Method #2: Replace our code with 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 page 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 19 (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 into the template (if your plugin does not provide a template tag), you would use the following format:
<?php echo do_shortcode('[your_shortcode]'); ?>
View the following article on the WordPress Codex for help with this : http://codex.wordpress.org/Function_Reference/do_shortcode
Have you seen Elementor?
You can build almost any Obox theme with Elementor!
With a powerful, fast page builder, Elementor is the best way to get your site online with as little effort as possible.
