Google Maps Api v3: How to use icon with marker

Example shows how to use icon with marker which is centered to the view

by Gopinath Kaliappan

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
    function initialize() {

        var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);

        var mapOptions = {
            zoom: 4,
            center: myLatlng
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var img = `<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" 
            style="fill: orange; stroke: blue; stroke-width: 2"/>
  </svg>`;
        // Example marker image
        var markerImage = {
            /* url: "http://placehold.it/64/ff0000",  */
            url: url
            size: new google.maps.Size(64, 64),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(32, 32)
        };

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World!',
            icon: markerImage  // How to place icon to marker
        });

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}