Please follow my code and I apologize for not using your code! I made all the necessary changes in my own code.
Note: In the js file included, you will need to add your Google API key to avoid display errors on the Google map page:
Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error.
By using this disableDefaultUI: true, I have hidden certain objects on the Google map. It is also possible to hide specific objects on the map.
If you wish to make edits to your code, add the following code below:
var customControlDiv = document.createElement('div');
var customControl = new CustomControl(customControlDiv, map);
customControlDiv.index = 1;
And the function goes like this:
function CustomControl(controlDiv, map) {
var tempBackgroundImage = "http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red-md.png";
controlDiv.style.padding = '5px';
controlDiv.style.right = '5px';
var myLocationControlDiv = document.createElement('DIV');
var controlUI = document.createElement('DIV');
controlUI.style.cursor = 'pointer';
controlUI.style.background = "url(" + tempBackgroundImage + ") 68px 78px";
controlUI.style.height = '68px';
controlUI.style.width = '68px';
controlUI.style.right = '15px';
controlUI.style.bottom = '50px';
controlUI.style.backgroundSize= '68px 78px';
controlUI.title = 'Current location';
myLocationControlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI);
}
That's all you need!
You can utilize the complete code below if you're not using any other code:
Html
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
disableDefaultUI: true
});
var customControlDiv = document.createElement('div');
var customControl = new CustomControl(customControlDiv, map);
customControlDiv.index = 1;
}
function CustomControl(controlDiv, map) {
var tempBackgroundImage = "http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red-md.png";
controlDiv.style.padding = '5px';
controlDiv.style.right = '5px';
var myLocationControlDiv = document.createElement('DIV');
var controlUI = document.createElement('DIV');
controlUI.style.cursor = 'pointer';
controlUI.style.background = "url(" + tempBackgroundImage + ") 68px 78px";
controlUI.style.height = '68px';
controlUI.style.width = '68px';
controlUI.style.right = '15px';
controlUI.style.bottom = '50px';
controlUI.style.backgroundSize= '68px 78px';
controlUI.title = 'Current location';
myLocationControlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initMap"
async defer></script>
<div id="map"></div>
Important thing:
Please adjust the values below according to the image size.
controlUI.style.height = '68px';
controlUI.style.width = '68px';
controlUI.style.backgroundSize= '68px 78px';