## Google Map

- Home
- Shortcodes
- Google Map

## Google Map

        <div class="row">
        <div class="col-xs-12 mt-xs-30">
        <div class="map-area">
        <div id="googleMap" style="width:100%;height:600px;"></div>
        </div>
        </div>
        </div>

        #bodyContent > p {
          margin-bottom: 0;
        }

        <!-- Google Map js -->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU"></script>

        <script>
        function initialize() {
        var mapOptions = {
        zoom: 10,
        scrollwheel: false,
        center: new google.maps.LatLng( 47.606205, -122.332046 ),
        };
        var map = new google.maps.Map(document.getElementById('googleMap'),
        mapOptions
        );
        var marker = new google.maps.Marker({
        position: map.getCenter(),
        icon: ' ',
        map: map
        });
        var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<div id="bodyContent">'+
        '<p>New York City Center, </br>Street Name, </br>New York City, USA</p>'+
        '</div>'+
        '</div>';
        var infowindow = new google.maps.InfoWindow({
        content: contentString
        });
        infowindow.open(map, marker);

        var styles =
        [
        {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
        {
        "color": "#636363"
        }
        ]
        },
        {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
        {
        "visibility": "on"
        },
        {
        "color": "#1f1f1f"
        }
        ]
        },
        {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
        {
        "visibility": "off"
        }
        ]
        },
        {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
        {
        "color": "#1F1F1F"
        }
        ]
        },
        {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
        {
        "color": "#1F1F1F"
        }
        ]
        },
        {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
        {
        "color": "#2A2A2A"
        },
        ]
        },
        {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
        {
        "color": "#2A2A2A"
        }
        ]
        },
        {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
        {
        "color": "#2A2A2A"
        }
        ]
        },
        {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
        {
        "color": "#2A2A2A"
        }
        ]
        },
        {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
        {
        "color": "#1a1a1a"
        }
        ]
        },
        {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
        {
        "color": "#1a1a1a"
        }
        ]
        },
        {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
        {
        "color": "#1a1a1a"
        }
        ]
        },
        {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
        {
        "color": "#1F1F1F"
        },
        ]
        }
        ];

        map.setOptions({styles: styles});
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>