I’m looking for an elegant way to overlay multiple images onto my google maps, there must be a simple way to do this without writing pages of code, but google doesn’t seem to provide a good clue for how to attach multiple custom overlays. Is there a way to create multiple overlay variables within the initialize() function?
<!DOCTYPE html>
<html>
<head>
<title>Dopler Scott</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var windowWidth = document.documentElement.clientWidth ;
if(windowWidth<1000){zoomValue=6;}else{zoomValue=8;}
var overlay;
portlandOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.710,-122.959),
zoom:zoomValue,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var swBound = new google.maps.LatLng(43.094, -125.895);
var neBound = new google.maps.LatLng(48.275, -120.250);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'http://s3.amazonaws.com/theoatmeal-img/quizzes/sriracha_addict/start_button.png';
overlay = new portlandOverlay(bounds, srcImage, map);
}
function portlandOverlay(bounds, image, map) { // Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map; // We define a property to hold the image's div. We'll actually create this div upon receipt of the onAdd() method so we'll leave it null for now.
this.div_ = null;
this.setMap(map); // Explicitly call setMap on this overlay
}
portlandOverlay.prototype.onAdd = function() { // Create the DIV and set some basic attributes.
// Note: an overlay's receipt of onAdd() indicates that the map's panes are now available for attaching the overlay to the map via the DOM.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.className = 'portland';
var img = document.createElement('img'); // Create an IMG element and attach it to the DIV.
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
// Set the overlay's div_ property to this DIV?
this.div_ = div;
// We add an overlay to a map via one of the map's panes. We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
portlandOverlay.prototype.draw = function() { // Size and position the overlay. We use a southwest and northeast position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay in latlngs and convert them to pixels 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';
}
startDoingStuff = function(){}
$(document).ready(startDoingStuff());
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
Your problem is not “Is there a way to create multiple overlay variables” , your problem is that you create the overlay-variable. (the next overlay-variable will overwrite the current)
Simply create the objects without giving it a name(you don’t use the name somewhere else inside your script, so you don’t need it at all):