Google Maps with svg icon

by Vadim Gremyachev

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas { 
height: 400px; 
}

JavaScript

var map;
var polyLine;
var polyOptions;


    
    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(52.373743,4.893114)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var icon = {
        url: "http://filippopoderini.com/marker-07.svg",
        anchor: new google.maps.Point(23,60),
        scaledSize: new google.maps.Size(46,60)
    }

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(52.373743, 4.893114),
        map: map,
        draggable: false,
        icon: icon,
    });
    
    google.maps.event.addListener(map, 'zoom_changed', function() {
      marker.setIcon(icon);
    });