Google Maps Not Showing on my Website

Question

I'm currently working on adjustments for a project for a bank, and they need to show the bank location using google maps.

The problem is that the website was already made, and working over someone else's code is difficult for me.

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

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4Z5K4tM5FBXQH5R__XwqyPzRbQR-fIZY"></script> <script> 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') > -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); }) 

Could you please tell me which CSS styles will show it as background please¿?

Answer 1

At a first look you have comma in wrong place in javascript object (remove the comma at the last entry of a object

    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
    }
    ....
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map,
        visible: true,
        icon: marker_url
    });

You should check in browser console for other runtime errors