title: Google Maps Not Showing on my Website
body: <p>I'm currently working on adjustments for a project for a bank, and they need to show the bank location using google maps.</p>
  
  <p>The problem is that the website was already made, and working over someone else's code is difficult for me.</p>
  
  <p>The google maps is inside a file called contact.php, it has a contact form, and the google maps set as a background. I will just paste the Javascript API to see if there are any error</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4Z5K4tM5FBXQH5R__XwqyPzRbQR-fIZY"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      jQuery(document).ready(function($){
          $('#btn_onlineb').css('color', '#6ca8cc');
          //set your google maps parameters
          var latitude = 15.299594,
              longitude = -61.387215,
              map_zoom = 8;
  
      
          //google map custom marker icon - .png fallback for IE11
          var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') &gt; -1;
          var marker_url = ( is_internetExplorer11 ) ? 'img/pic_zumageo.png' : 'img/pic_zumageo.png';
  
          //define the basic color of your map, plus a value for saturation and brightness
          var main_color = '#acc8d4',
              saturation_value= -20,
              brightness_value= 5;
  
          //we define here the style of the map
          var style= [
              {
                  //set saturation for the labels on the map
                  elementType: "labels",
                  stylers: [
                      {saturation: saturation_value}
                  ]
              },
              { //poi stands for point of interest - don't show these lables on the map
                  featureType: "poi",
                  elementType: "labels",
                  stylers: [
                      {visibility: "off"}
                  ]
              },
              {
                  //don't show highways lables on the map
                  featureType: 'road.highway',
                  elementType: 'labels',
                  stylers: [
                      {visibility: "off"}
                  ]
              },
              {
                  //don't show local road lables on the map
                  featureType: "road.local",
                  elementType: "labels.icon",
                  stylers: [
                      {visibility: "off"}
                  ]
              },
              {
                  //don't show arterial road lables on the map
                  featureType: "road.arterial",
                  elementType: "labels.icon",
                  stylers: [
                      {visibility: "off"}
                  ]
              },
              {
                  //don't show road lables on the map
                  featureType: "road",
                  elementType: "geometry.stroke",
                  stylers: [
                      {visibility: "off"}
                  ]
              },
              //style different elements on the map
              {
                  featureType: "transit",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "poi",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "poi.government",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "poi.sport_complex",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "poi.attraction",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "poi.business",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "transit",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "transit.station",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "landscape",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
  
              },
              {
                  featureType: "road",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "road.highway",
                  elementType: "geometry.fill",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
  
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              },
              {
                  featureType: "water",
                  elementType: "geometry",
                  stylers: [
                      { hue: main_color },
                      { visibility: "on" },
                      { lightness: brightness_value },
                      { saturation: saturation_value }
                  ]
              }
          ];
  
          //set google map options
          var map_options = {
              center: new google.maps.LatLng(latitude, longitude),
              zoom: map_zoom,
              panControl: false,
              zoomControl: false,
              mapTypeControl: false,
              streetViewControl: true,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false,
              styles: style,
          }
          //inizialize the map
          var map = new google.maps.Map(document.getElementById('google-container'), map_options);
          //add a custom marker to the map
          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(latitude, longitude),
              map: map,
              visible: true,
              icon: marker_url,
          });
  
          //add custom buttons for the zoom-in/zoom-out on the map
          function CustomZoomControl(controlDiv, map) {
              //grap the zoom elements from the DOM and insert them in the map
              var controlUIzoomIn= document.getElementById('cd-zoom-in'),
                  controlUIzoomOut= document.getElementById('cd-zoom-out');
              controlDiv.appendChild(controlUIzoomIn);
              controlDiv.appendChild(controlUIzoomOut);
  
              // Setup the click event listeners and zoom-in or out according to the clicked element
              google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
                  console.log("Plus: " + map.getZoom());
                  map.setZoom(map.getZoom()+1)
              });
              google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
                  console.log("Minus: " + map.getZoom());
                  map.setZoom(map.getZoom()-1)
              });
          }
  
          var zoomControlDiv = document.createElement('div');
          var zoomControl = new CustomZoomControl(zoomControlDiv, map);
  
          //insert the zoom div on the top left of the map
          map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
  
      })</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could you please tell me which CSS styles will show it as background please¿?</p>