element map

Home > element 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>