The Google Map 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:
<title>Adding a Custom Overlay</title>
/* 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);
<div id="map"></div>For more information on overlays, read Google’s documentation here.
Last updated by on .
