Title: Embedded Google Map
Last modified: June 9, 2019

---

# Embedded Google Map

 *  [ClyntonVDB](https://wordpress.org/support/users/clyntonvdb/)
 * (@clyntonvdb)
 * [7 years ago](https://wordpress.org/support/topic/embedded-google-map/)
 * I am trying to style the embedded Google map in the Google Maps section using
   the code on the following page:
    [https://snazzymaps.com/style/253495/minimal-map](https://snazzymaps.com/style/253495/minimal-map)
 * You have to add the following scripts to the header, which I did and I did enter
   my API key:
 *     ```
       <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
       <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
       ```
   
 * Then the following is added to the header too and this is the script that styles
   the map as it appears on [https://snazzymaps.com/style/253495/minimal-map](https://snazzymaps.com/style/253495/minimal-map):
 *     ```
       <script type="text/javascript">
                   // When the window has finished loading create our google map below
                   google.maps.event.addDomListener(window, 'load', init);
   
                   function init() {
                       // Basic options for a simple Google Map
                       // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
                       var mapOptions = {
                           // How zoomed in you want the map to start at (always required)
                           zoom: 11,
   
                           // The latitude and longitude to center the map (always required)
                           center: new google.maps.LatLng(40.6700, -73.9400), // New York
   
                           // How you would like to style the map. 
                           // This is where you would paste any style found on Snazzy Maps.
                           styles: [{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"},{"color":"#f49f53"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"on"},{"weight":"0.01"},{"color":"#637381"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"color":"#637381"},{"visibility":"on"},{"weight":"0.01"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#ffffff"},{"lightness":-7},{"gamma":"10.00"}]},{"featureType":"poi","elementType":"all","stylers":[{"color":"#ffffff"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"lightness":38}]},{"featureType":"poi.government","elementType":"all","stylers":[{"lightness":46}]},{"featureType":"poi.medical","elementType":"geometry.fill","stylers":[{"lightness":38}]},{"featureType":"poi.park","elementType":"all","stylers":[{"lightness":39}]},{"featureType":"poi.school","elementType":"all","stylers":[{"lightness":35}]},{"featureType":"poi.sports_complex","elementType":"all","stylers":[{"lightness":32}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":43}]},{"featureType":"road.highway","elementType":"all","stylers":[{"color":"#dbdde0"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"weight":"0.66"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"on"},{"color":"#dadce0"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"weight":1.3},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"lightness":-10}]},{"featureType":"transit","elementType":"all","stylers":[{"lightness":38}]},{"featureType":"transit.line","elementType":"all","stylers":[{"color":"#813033"},{"lightness":22},{"visibility":"off"}]},{"featureType":"transit.station","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#e3e5e9"},{"saturation":-69},{"gamma":0.99},{"lightness":43}]}]
                       };
   
                       // Get the HTML DOM element that will contain your map 
                       // We are using a div with id="map" seen below in the <body>
                       var mapElement = document.getElementById('map');
   
                       // Create the Google Map using our element and options defined above
                       var map = new google.maps.Map(mapElement, mapOptions);
   
                       // Let's also add a marker while we're at it
                       var marker = new google.maps.Marker({
                           position: new google.maps.LatLng(40.6700, -73.9400),
                           map: map,
                           title: 'Snazzy!'
                       });
                   }
              </script>
       ```
   

The topic ‘Embedded Google Map’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/portum/1.0.6/screenshot.png)
 * Portum
 * [Support Threads](https://wordpress.org/support/theme/portum/)
 * [Active Topics](https://wordpress.org/support/theme/portum/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/portum/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/portum/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [ClyntonVDB](https://wordpress.org/support/users/clyntonvdb/)
 * Last activity: [7 years ago](https://wordpress.org/support/topic/embedded-google-map/)
 * Status: not resolved