title: How to edit Google Map styling in wordpress theme
body: <p>I managed to grab a code from Google which allows me to edit the colors of Google Map and I have it in my code pen <a href="https://codepen.io/melodiacapoeira/pen/oVorxz" rel="nofollow noreferrer">here</a></p>
  
  <p>At the moment, the theme I have works in the following way: if I click under a city name, it opens the respective page and then Google map shows that particular location, and so on.</p>
  
  <p>How do I implement the code I have in my pen into the WordPress site?</p>
  
  <p>In the child theme, I copied the footer content and added all the script and the full footer looks like this:</p>
  
  <pre><code>&lt;?php
  /**
   * The template for displaying the footer
   *
   * Contains the closing of the #content div and all content after.
   *
   * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
   *
   * @package siber
   */
  ?&gt;          
              &lt;?php if(siber_styles()['footer'] == 'show' &amp;&amp; siber_styles()['footer_scroll_top'] == 'show' &amp;&amp; siber_styles()['header_style'] != 'side') { ?&gt;
                  &lt;div class="scroll-top multimedia-element-set-icons-up-arrow-2" id="scroll-top"&gt;&lt;/div&gt;
              &lt;?php } if(siber_styles()['footer'] == 'show' || siber_styles()['footer'] == 'minified') { ?&gt;
                  &lt;footer class="site-footer light main-row"&gt;
                      &lt;?php if(siber_styles()['footer'] != 'minified') { ?&gt;
                          &lt;div class="footer-wrap"&gt;
                              &lt;div class="container"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-xs-12 col-sm-6 col-md-&lt;?php echo esc_attr(siber_styles()['footer_col_1']) ?&gt;"&gt;
                                          &lt;div class="logo"&gt;&lt;a href="&lt;?php echo esc_url(home_url('/')) ?&gt;"&gt;&lt;?php echo wp_kses(siber_styles()['logo_content'], 'post') ?&gt;&lt;/a&gt;&lt;/div&gt;
                                          &lt;?php if(is_active_sidebar('footer-1')) { ?&gt;
                                              &lt;?php dynamic_sidebar('footer-1'); ?&gt;
                                          &lt;?php } ?&gt;
                                      &lt;/div&gt;
                                      &lt;?php if(is_active_sidebar('footer-2')) { ?&gt;
                                      &lt;div class="col-xs-12 col-sm-6 col-md-&lt;?php echo esc_attr(siber_styles()['footer_col_2']) ?&gt;"&gt;
                                          &lt;?php dynamic_sidebar('footer-2'); ?&gt;
                                      &lt;/div&gt;
                                      &lt;?php } if(is_active_sidebar('footer-3')) { ?&gt;
                                      &lt;div class="col-xs-12 col-sm-6 col-md-&lt;?php echo esc_attr(siber_styles()['footer_col_3']) ?&gt;"&gt;
                                          &lt;?php dynamic_sidebar('footer-3'); ?&gt;
                                      &lt;/div&gt;
                                      &lt;?php } if(is_active_sidebar('footer-4')) { ?&gt;
                                      &lt;div class="col-xs-12 col-sm-6 col-md-&lt;?php echo esc_attr(siber_styles()['footer_col_4']) ?&gt;"&gt;
                                          &lt;?php dynamic_sidebar('footer-4'); ?&gt;
                                      &lt;/div&gt;
                                      &lt;?php } ?&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;?php } ?&gt;
                  &lt;/footer&gt;
  
              &lt;?php } ?&gt;
          &lt;/div&gt;
          &lt;script&gt;
        function initMap() {
  
          // Create a new StyledMapType object, passing it an array of styles,
          // and the name to be displayed on the map type control.
          var styledMapType = new google.maps.StyledMapType(
            [
              {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
              {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
              {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
              {
                featureType: 'administrative',
                elementType: 'geometry.stroke',
                stylers: [{color: '#c9b2a6'}]
              },
              {
                featureType: 'administrative.land_parcel',
                elementType: 'geometry.stroke',
                stylers: [{color: '#dcd2be'}]
              },
              {
                featureType: 'administrative.land_parcel',
                elementType: 'labels.text.fill',
                stylers: [{color: '#ae9e90'}]
              },
              {
                featureType: 'landscape.natural',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'poi',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'poi',
                elementType: 'labels.text.fill',
                stylers: [{color: '#93817c'}]
              },
              {
                featureType: 'poi.park',
                elementType: 'geometry.fill',
                stylers: [{color: '#a5b076'}]
              },
              {
                featureType: 'poi.park',
                elementType: 'labels.text.fill',
                stylers: [{color: '#447530'}]
              },
              {
                featureType: 'road',
                elementType: 'geometry',
                stylers: [{color: '#f5f1e6'}]
              },
              {
                featureType: 'road.arterial',
                elementType: 'geometry',
                stylers: [{color: '#fdfcf8'}]
              },
              {
                featureType: 'road.highway',
                elementType: 'geometry',
                stylers: [{color: '#f8c967'}]
              },
              {
                featureType: 'road.highway',
                elementType: 'geometry.stroke',
                stylers: [{color: '#e9bc62'}]
              },
              {
                featureType: 'road.highway.controlled_access',
                elementType: 'geometry',
                stylers: [{color: '#e98d58'}]
              },
              {
                featureType: 'road.highway.controlled_access',
                elementType: 'geometry.stroke',
                stylers: [{color: '#db8555'}]
              },
              {
                featureType: 'road.local',
                elementType: 'labels.text.fill',
                stylers: [{color: '#806b63'}]
              },
              {
                featureType: 'transit.line',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'transit.line',
                elementType: 'labels.text.fill',
                stylers: [{color: '#8f7d77'}]
              },
              {
                featureType: 'transit.line',
                elementType: 'labels.text.stroke',
                stylers: [{color: '#ebe3cd'}]
              },
              {
                featureType: 'transit.station',
                elementType: 'geometry',
                stylers: [{color: '#dfd2ae'}]
              },
              {
                featureType: 'water',
                elementType: 'geometry.fill',
                stylers: [{color: '#b9d3c2'}]
              },
              {
                featureType: 'water',
                elementType: 'labels.text.fill',
                stylers: [{color: '#92998d'}]
              }
            ],
            {name: 'Styled Map'});
  
          // Create a map object, and include the MapTypeId to add
          // to the map type control.
          var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 55.647, lng: 37.581},
            zoom: 11,
            mapTypeControlOptions: {
              mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                           'styled_map']
            }
          });
  
          //Associate the styled map with the MapTypeId and set it to display.
          map.mapTypes.set('styled_map', styledMapType);
          map.setMapTypeId('styled_map');
        }
      &lt;/script&gt;
          &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&amp;callback=initMap"&gt;
      &lt;/script&gt;
  
          &lt;?php wp_footer(); ?&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I load the page, I see the following error in the console:</p>
  
  <blockquote>
    <p>You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.</p>
  </blockquote>
  
  <p>If I remove the API KEY directly from the theme options, the map does not show.</p>