2615

Google Maps show/hide multiple overlays

Question:

What I would like, are 2 custom overlays on a map, with the ability to show/hide both overlays separately using two buttons. Currently, I have 1 overlay that can be shown/hid with a button, but I cannot get the second overlay on the map. <a href="https://stackoverflow.com/questions/12868044/how-to-overlay-multiple-images-onto-google-maps" rel="nofollow">This suggestion</a> doesn't work for me (yet), while my code looks like this:

<script> var overlay; SchipholOverlay.prototype = new google.maps.OverlayView(); function initialize() { var mapProp = { //set map properties center:new google.maps.LatLng(52.309213,4.762316), zoom:16, mapTypeId:google.maps.MapTypeId.HYBRID }; //create map variable with properties var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); var swBound = new google.maps.LatLng(52.299000,4.759711); var neBound = new google.maps.LatLng(52.313400,4.786885); var swBound2 = new google.maps.LatLng(52.299000,4.759711); var neBound2 = new google.maps.LatLng(52.283400,4.782885); var bounds = new google.maps.LatLngBounds(swBound, neBound); var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2); // Insert overlay image here var srcImage = 'departures_gates.gif'; var srcImage2 = 'arrivalsdepartures2.gif'; overlay = new SchipholOverlay(bounds, srcImage, map); overlay = new SchipholOverlay(bounds2, scrImage2, map); } function SchipholOverlay(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 add() method so we'll // leave it null for now. this.div_ = null; // Explicitly call setMap() on this overlay this.setMap(map); } SchipholOverlay.prototype.onAdd = function() { // 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. // Create the DIV and set some basic attributes. var div = document.createElement('div'); div.style.borderStyle = 'none'; div.style.borderWidth = '0px'; div.style.position = 'absolute'; // Create an IMG element and attach it to the DIV. var img = document.createElement('img'); img.src = this.image_; img.style.width = '65%'; img.style.height = '65%'; 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); } SchipholOverlay.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'; } SchipholOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); //this.div_ = null; } SchipholOverlay.prototype.hide = function() { if (this.div_) { this.div_.style.visibility = "hidden"; } } SchipholOverlay.prototype.show = function() { if (this.div_) { this.div_.style.visibility = "visible"; } } SchipholOverlay.prototype.toggle = function() { if (this.div_) { if (this.div_.style.visibility == 'hidden') { this.show(); } else { this.hide(); } } } //initialize the map google.maps.event.addDomListener(window, 'load', initialize);

The html:

<div id ="panel"> <input type="button" value="Toggle Visibility" onclick="overlay.toggle();"></input> </div> <div class="map" id="googleMap" style="width:1600px;height:800px;"></div>

Any help would be greatly appreciated!

Answer1:

Keep a unique reference to each overlay (as suggested in the linked question).

Instead of this (which overwrites the reference to the first):

overlay = new SchipholOverlay(bounds, srcImage, map); overlay = new SchipholOverlay(bounds2, srcImage2, map);

Give them unique names or push them onto an array:

// in the global scope var overlays = []; overlays.push(new SchipholOverlay(bounds, srcImage, map)); overlays.push(new SchipholOverlay(bounds2, srcImage2, map));

Note: scrImage2 seems to be a typo.

<input type="button" value="Toggle Visibility 1" onclick="overlays[0].toggle();"></input> <input type="button" value="Toggle Visibility 2" onclick="overlays[1].toggle();">

<a href="http://www.geocodezip.com/v3_SO_toggleOverlays.html" rel="nofollow">example</a> (no images)

Recommend

  • Google Maps show/hide multiple overlays
  • Multiple Google maps on one page - Map API 3
  • Parsing data onto google map
  • How to get Sorted alphabetical markers
  • Google Maps API zoom after setcenter
  • Computing latitude longitude center point of a Polygon in PHP
  • How can I get the visible markers in Google Maps v2 in Android?
  • Google Maps API v3 - fitBounds centers only one marker
  • Android Google Map How to Parse alternate route's distance
  • Google Maps: Custom Marker Icon - Not plotting at Center of Rectangle
  • Google maps individual marker infowindow - how to?
  • Maps: is lat/lgn inside a rectangle
  • how to open all infoWIndows with button
  • android-How to check location is in special area?
  • Is there a way to set the bounds and Zoom level in AGM Map?
  • Google Maps Spiderfying Markers & Adding Listeners
  • Close open InfoBubble when open a new (gMap v3)
  • How to add a random point inside a polygon in Google Maps?
  • Android Google Maps: set boundary on 2 locations and center on one of them
  • gmaps4rails and autocomplete google place API incompatibility
  • Apigility - How to use Doctrine ORM Module from ZF2 command line
  • iPhone dealing with xml vs soap vs JSON vs RESTful
  • Using a canvas object in a thread to do simple animations - Java
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Transactional Create with Validation in ServiceStack Redis Client
  • Python urlparse: small issue
  • FileReader+canvas image loading problem
  • PHP - How to update data to MySQL when click a radio button
  • Join two tables and save into third-sql
  • How to handle AllServersUnavailable Exception
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • python draw pie shapes with colour filled