Need help with customization of Google Maps API?

Hello
There is such HTML tags:
<section id="google-map">
 <div id="google-container"></div>
 <div id="zoom-in"></div>
 <div id="zoom-out"></div>
 <address>street of Artem, 80, Kiev, Kyiv city, Ukraine</address>
 </section>


And JS-code by customization of the card:

function initialize() {

 // Create an array of styles.
 var latitude = 53.356525,
 longitude = -6.253810,
 map_zoom = 18;

 //Address to buttons with a marker
 var marker_url = 'img/marker.png';


 var main_color = '#007148', //primary color
 saturation_value= -1, //saturation
 brightness_value= 1; //brightness


//Styles for the elements on the map
 var style= [
{
 "stylers": [
{
 "visibility": "on"
},
{
 "saturation": -100
},
{
 gamma: 0.54
}
]
},
{
 "feature": "road",
 "elementType": "labels.icon",
 "stylers": [
{
 "visibility": "off"
}
]
},
{
 "feature": "water"
 "stylers": [
{
 "color": "#4d4946"
}
]
},
{
 "feature": "poi",
 "elementType": "labels.icon",
 "stylers": [
{
 "visibility": "off"
}
]
},
{
 "feature": "poi",
 "elementType": "labels.text",
 "stylers": [
{
 "visibility": "simplified"
}
]
},
{
 "feature": "road",
 "elementType": "geometry.fill",
 "stylers": [
{
 "color": "#ffffff"
}
]
},
{
 "feature": "road.local",
 "elementType": "labels.text",
 "stylers": [
{
 "visibility": "simplified"
}
]
},
{
 "feature": "water"
 "elementType": "labels.text.fill",
 "stylers": [
{
 "color": "#ffffff"
}
]
},
{
 "feature": "transit.line",
 "elementType": "geometry",
 "stylers": [
{
 gamma: 0.48
}
]
},
{
 "feature": "transit.station",
 "elementType": "labels.icon",
 "stylers": [
{
 "visibility": "off"
}
]
},
{
 "feature": "road",
 "elementType": "geometry.stroke",
 "stylers": [
{
 "gamma": 7.18
}
]
}

];

 //Create points on the map
 var map_options = {
 center: new google.maps.LatLng(latitude, longitude),
 zoom: map_zoom,
 panControl: false,
 zoomControl: false,
 mapTypeControl: false,
 streetViewControl: false,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 scrollwheel: false,
 styles: style
}
 //Map initialization
 var map = new google.maps.Map(document.getElementById('google-container'), map_options);
 //Add your marker location on the map (an icon)
 var marker = new google.maps.Marker({
 position: new google.maps.LatLng(latitude, longitude),
 map: map,
 visible: true,
 icon: marker_url
});

 //Add icons to buttons to increase/decrease at the map
 CustomZoomControl function(controlDiv, map) {
 var controlUIzoomIn= document.getElementById('zoom-in'),
 controlUIzoomOut= document.getElementById('zoom-out');
controlDiv.appendChild(controlUIzoomIn);
controlDiv.appendChild(controlUIzoomOut);

 //Do the binding for the buttons to increase/decrease when clicking
 google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
map.setZoom(map.getZoom()+1)
});
 google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
map.setZoom(map.getZoom()-1)
});
}

 var zoomControlDiv = document.createElement('div');
 var zoomControl = new CustomZoomControl(zoomControlDiv, map);

 //Put the buttons to increase/decrease the map in the upper left corner
map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);

}


The problem is, that point on the map that I mentioned in the tag address. What do you think could be the problem?
July 9th 19 at 10:57

Find more questions by tags GoogleGoogle MapsJavaScript