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>