WordPress. How to add an address/text to Google map coordinator

This tutorial shows how to add an address or text to Google map coordinator in WordPress templates.

WordPress. How to add an address/text to Google map coordinator

In order to add a message to your google map coordinator, you should perform the following:

1. Open up the wp-content/themes/themeXXXXX/includes/custom-function.php file and locate the following code

   var contentString = "<div></div>";

   

2. Insert your message between the div tags. You can use any HTML code inside, only make sure you escape double quotes with slashes. Also we strongly recommend adding classes to the elements you insert. It will help you style the message box. In the example below we added a paragraph with a specific class map_msg and escaped the double quotes:

   var contentString = "<div><p class=\"map_msg\">Hello, World</p></div>";

   

3. Save the changes in the custom-function.php file and upload it to the server:

4. In different templates the default text color may differ. To set your own color and add any styling, use the class you assigned to your message HTML elements.

   In our example we change the white color to black, increase the font-size of the text and remove the bottom margin of the paragraph. In order to do that, we add the following code to the very bottom of the wp-content/themes/themeXXXXX/style.css file:

   .map_msg {
   	color: black;
   	font-size: 18px;
   	margin-bottom: 0;
   	}

   

   

   The final result should look like this:

   

Feel free to check the detailed video tutorial below:

WordPress. How to add an address/text to Google map coordinator