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

    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:

    <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.