portfolio/src/main/webapp/script.js
/** Initialize a map utlizing google's Map API for web */
Initialize a map utlizing google's Map API for web
Initialize a map utlizing google ' s Map API for web
function initMap() {
  const markerPos = {lat: 31.770581604323954, lng: -106.50421142578125};
  const marker =
      new google.maps.Marker({position: markerPos, title: 'UTEP! My school.'});
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 31.7869021, lng: -106.3127764},
    zoom: 15,
    styles: [
      {elementType: 'geometry', stylers: [{color: DARKER_BLUE}]},
      {elementType: 'labels.text.stroke', stylers: [{color: DARKER_BLUE}]},
      {elementType: 'labels.text.fill', stylers: [{color: LIGHT_BROWN}]}, {
        featureType: 'administrative.locality',
        elementType: 'labels.text.fill',
        stylers: [{color: ORANGE}]
      },
      {
        featureType: 'poi',
        elementType: 'labels.text.fill',
        stylers: [{color: ORANGE}]
      },
      {
        featureType: 'poi.park',
        elementType: 'geometry',
        stylers: [{color: OPAQUE_BLUE}]
      },
      {
        featureType: 'poi.park',
        elementType: 'labels.text.fill',
        stylers: [{color: DIM_GREEN}]
      },
      {featureType: 'road', elementType: 'geometry', stylers: [{color: GREY}]},
      {
        featureType: 'road',
        elementType: 'geometry.stroke',
        stylers: [{color: DARKER_GREY}]
      },
      {
        featureType: 'road',
        elementType: 'labels.text.fill',
        stylers: [{color: LIGHT_GREY}]
      },
      {
        featureType: 'road.highway',
        elementType: 'geometry',
        stylers: [{color: LIGHT_BROWN}]
      },
      {
        featureType: 'road.highway',
        elementType: 'geometry.stroke',
        stylers: [{color: DARK_BLUE}]
      },
      {
        featureType: 'road.highway',
        elementType: 'labels.text.fill',
        stylers: [{color: BEIGE}]
      },
      {
        featureType: 'transit',
        elementType: 'geometry',
        stylers: [{color: GREY_BLUE}]
      },
      {
        featureType: 'transit.station',
        elementType: 'labels.text.fill',
        stylers: [{color: ORANGE}]
      },
      {
        featureType: 'water',
        elementType: 'geometry',
        stylers: [{color: BLACK_BLUE}]
      },
      {
        featureType: 'water',
        elementType: 'labels.text.fill',
        stylers: [{color: DARK_BABYBLUE}]
      },
      {
        featureType: 'water',
        elementType: 'labels.text.stroke',
        stylers: [{color: DARK_BABYBLUE}]
      }
    ]
  });
  const contentString = '<div id="map-content">' +
      '<div id="site-description">' +
      '</div>' +
      '<h1 id="firstHeading" class="firstHeading">UTEP</h1>' +
      '<div id="bodyContent">' +
      '<p>Attending UTEP since Fall 2018 as a computer science major' +
      '. Utep is also recognized as one the most diverse schools along ' +
      'with successful engineering programs.</p></div>' +
      '</div>';
  const infowindow = new google.maps.InfoWindow({content: contentString});
  marker.setMap(map);
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
function initMap ( ) { const markerPos = { lat : 31.770581604323954 , lng : - 106.50421142578125 } ; const marker = new google . maps . Marker ( { position : markerPos , title : 'UTEP! My school.' } ) ; const map = new google . maps . Map ( document . getElementById ( 'map' ) , { center : { lat : 31.7869021 , lng : - 106.3127764 } , zoom : 15 , styles : [ { elementType : 'geometry' , stylers : [ { color : DARKER_BLUE } ] } , { elementType : 'labels.text.stroke' , stylers : [ { color : DARKER_BLUE } ] } , { elementType : 'labels.text.fill' , stylers : [ { color : LIGHT_BROWN } ] } , { featureType : 'administrative.locality' , elementType : 'labels.text.fill' , stylers : [ { color : ORANGE } ] } , { featureType : 'poi' , elementType : 'labels.text.fill' , stylers : [ { color : ORANGE } ] } , { featureType : 'poi.park' , elementType : 'geometry' , stylers : [ { color : OPAQUE_BLUE } ] } , { featureType : 'poi.park' , elementType : 'labels.text.fill' , stylers : [ { color : DIM_GREEN } ] } , { featureType : 'road' , elementType : 'geometry' , stylers : [ { color : GREY } ] } , { featureType : 'road' , elementType : 'geometry.stroke' , stylers : [ { color : DARKER_GREY } ] } , { featureType : 'road' , elementType : 'labels.text.fill' , stylers : [ { color : LIGHT_GREY } ] } , { featureType : 'road.highway' , elementType : 'geometry' , stylers : [ { color : LIGHT_BROWN } ] } , { featureType : 'road.highway' , elementType : 'geometry.stroke' , stylers : [ { color : DARK_BLUE } ] } , { featureType : 'road.highway' , elementType : 'labels.text.fill' , stylers : [ { color : BEIGE } ] } , { featureType : 'transit' , elementType : 'geometry' , stylers : [ { color : GREY_BLUE } ] } , { featureType : 'transit.station' , elementType : 'labels.text.fill' , stylers : [ { color : ORANGE } ] } , { featureType : 'water' , elementType : 'geometry' , stylers : [ { color : BLACK_BLUE } ] } , { featureType : 'water' , elementType : 'labels.text.fill' , stylers : [ { color : DARK_BABYBLUE } ] } , { featureType : 'water' , elementType : 'labels.text.stroke' , stylers : [ { color : DARK_BABYBLUE } ] } ] } ) ; const contentString = '<div id="map-content">' + '<div id="site-description">' + '</div>' + '<h1 id="firstHeading" class="firstHeading">UTEP</h1>' + '<div id="bodyContent">' + '<p>Attending UTEP since Fall 2018 as a computer science major' + '. Utep is also recognized as one the most diverse schools along ' + 'with successful engineering programs.</p></div>' + '</div>' ; const infowindow = new google . maps . InfoWindow ( { content : contentString } ) ; marker . setMap ( map ) ; marker . addListener ( 'click' , function ( ) { infowindow . open ( map , marker ) ; } ) ; }
Initialize a map utlizing google's Map API for web
Initialize a map utlizing google ' s Map API for web
// colors for styles // set styles for dark mode