Question

I have successfully added a custom image for the marker on the google map. The problem is such that the default marker that is balloon still appears along with the new image.

How should remove the default marker and only use the custom image?
The following is the code block that I have used :

    var image = "image url";   
    marker = createMarker(point, address1, town, postcode, SiteName);
    marker = new google.maps.Marker({
    position: point,
    map: map,
    icon: image
    });

The code for createMarker function is as follows:

       function createMarker(point, address1, town, postcode, sitename) {

        var html;
        var infowindow;
        html = '<b>' + sitename + '</b>' + '<br/>' + address1 + '<br/>' + town + '<br/>' + postcode;
        var marker = new google.maps.Marker({ position: point, map: map });            

        google.maps.event.addListener(marker, "mouseover", function () {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({ content: html });
            infowindow.open(map, marker);
        });   

        google.maps.event.addListener(marker, "click", function () {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({ content: html });
            infowindow.open(map, marker);
        });            
        return marker;
    }

Answer 1

Icon property- can be set an image OR vector path:
Example-

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(-25.363882, 131.044922),
    icon: {
    path: google.maps.SymbolPath.CIRCLE, 
    },
    or
    icon: url of an image,
    draggable: true,
    map: map,
    animation: google.maps.Animation.DROP
});

This icon property will override the default ballon icon

Or if you want to set the icon later in the code- just write- marker.setIcon("your url");

---

UPDATE: You are actually creating two markers at the same location, one with the custom icon and with default icon.
Here-

marker = createMarker(point, address1, town, postcode, SiteName);`// marker1`
    marker = new google.maps.Marker({ `...... //marker 2`

So combine these both-

function createMarker(point, address1, town, postcode, sitename, image) {
//code

var marker = new google.maps.Marker({ position: point, map: map, icon:image });