How do I place SVGs on a Google Map using Custom Overlays?

The Google Maps API is very robust and allows you to do almost any customizations that you need to do to a map. One of the features that Google has created is Custom Overlays. A custom overlay is an image that you place on top of the map. When you zoom and pan, the custom overlay will stay at the latitude and longitude that you tell it to be at. The Google Maps documentation shows you how to place an image on the map, but falls short in showing how to add other media to the custom overlay. Here is an example of how to add SVGs to a map:

/* 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;
}

var map;

function initMap() {
    var myOptions = {
        zoom: 2,
        minZoom: 3,
        center: new google.maps.LatLng(10, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        bounds: new google.maps.LatLngBounds(bounds)
    };
    var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(60.626, 40.285), new google.maps.LatLng(60.627, 80.29));
    // initialize the map        
    map = new google.maps.Map(document.getElementById('map'), myOptions);
    var svgBounds = new google.maps.LatLngBounds(new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608));
    initOverlay(svgBounds);
}
var overlaySVG;

function initOverlay(svgBounds) {
    SVGOverlay.prototype = new google.maps.OverlayView();
    /** @constructor */
    function SVGOverlay(bounds, image, map) {
        // Initialize all properties.
        this.bounds_ = bounds;
        this.image_ = image;
        this.map_ = map;
        this.div_ = null;
        this.setMap(map);
    }
    SVGOverlay.prototype.onAdd = function() {
        var div = document.createElement("div") div.style.borderStyle = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';
        // Load the inline svg element and attach it to the div.
        var svg = this.image_;
        svg.style.width = '100%';
        svg.style.height = '100%';
        div.appendChild(svg);
        this.div_ = div;
        // Add the element to the "overlayLayer" pane.
        var panes = this.getPanes();
        panes.overlayLayer.appendChild(div);
    };
    SVGOverlay.prototype.draw = function() {
        // We use the south-west and north-east            
        // coordinates of the overlay to peg it to the correct position and size.            
        // To do this, we need to retrieve the projection from the overlay.            
        var overlayProjection = this.getProjection();
        // Retrieve the south-west and north-east coordinates of this overlay            
        // in LatLngs and convert them to pixel coordinates.            
        // We'll use these coordinates to resize the div.
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
        // Resize the image's div to fit the indicated dimensions.
        var div = this.div_;
        div.style.left = sw.x + 'px';
        div.style.top = ne.y + 'px';
        div.style.width = (ne.x - sw.x) + 'px';
        div.style.height = (sw.y - ne.y) + 'px';
    };
    mySVG = document.getElementById('svg');
    overlaySVG = new SVGOverlay(svgBounds, mySVG, map);
}
google.maps.event.addDomListener(window, 'load', initMap);

Ready to start a project?

`Ready to start a project?`