Databases
StackOverflow2013
Postsdbo
POGoogle Maps API - (Using OverlayView) Only have one map marker open at a time?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API - (Using OverlayView) Only have one map marker open at a time?
    primarykey
    data
    text
    <p>I am trying to figure out with OverlayView for Google Maps API how to make it to where if you have one map marker opened already, and you try to open another, it automatically closes the open one, so there is really only one marker open at a time, and so on. Here is the js code I currently have already:</p> <pre><code>var GMap = (function() { var that = {}; that.map = null; that.center = new google.maps.LatLng(33.7856030000,-84.4090570000); that.map_type = google.maps.MapTypeId.ROADMAP; that.markers = {}; that.windows = {}; that.bounds = new google.maps.LatLngBounds(); that.use_bounds = false; that.watch_click = false; that.zoom = 10; that.addCityMarker = function(opts) { that.markers[opts.id] = that.standardMarker(opts); var myLatlng = that.markers[opts.id].getPosition(); google.maps.event.addListener(that.markers[opts.id], "click", function(e) { that.windows[opts.id] = new InfoBox({ data: opts, latlng: myLatlng, map: that.map, type: 'city' }); }); google.maps.event.trigger(that.markers[opts.id], "click"); if(that.use_bounds == true) { that.bounds.extend(myLatlng); } }; that.addCityMarkers = function(data) { for(var i in data) { if(data[i]) { that.addCityMarker(data[i]); } } }; that.addCommunityMarker = function(opts) { if(!that.markers[opts.data.id]) { that.markers[opts.data.id] = that.standardMarker(opts); var myLatlng = that.markers[opts.data.id].getPosition(); google.maps.event.addListener(that.markers[opts.data.id], "click", function(e) { that.windows[opts.data.id] = new InfoBox({ data: opts.data, latlng: myLatlng, map: that.map, type: 'community' }); }); google.maps.event.trigger(that.markers[opts.data.id], "click"); if(that.use_bounds == true) { that.bounds.extend(myLatlng); } } else { console.log('skipped adding duplicate community window to map'); } }; that.addCommunityMarkers = function(data) { for(var i in data) { if(data[i]) { GMap.addCommunityMarker(data[i]); } } }; that.finish = function() { if(that.use_bounds == true) { that.map.fitBounds(that.bounds); } }; that.standardMarker = function(opts) { var icon = new google.maps.MarkerImage( '/images/map/trans.png', new google.maps.Size(1,1), new google.maps.Point(0,0), new google.maps.Point(0,0) ); var shadow = new google.maps.MarkerImage( '/images/map/trans.png', new google.maps.Size(1,1), new google.maps.Point(0,0), new google.maps.Point(0,0) ); var marker = new google.maps.Marker({ icon: icon, position: new google.maps.LatLng(opts.lat,opts.lng), map: that.map, shadow: shadow }); return marker; } that.triggerMarker = function(id) { if(that.windows[id]) { that.map.setCenter(that.markers[id].getPosition()); if(!$('#info_window_'+id).hasClass('open')) { $('#info_window_'+id+' a.expand').trigger('click'); } } else { console.log('no marker for: '+id); } }; that.resize = function() { google.maps.event.trigger(that.map, 'resize'); if(that.use_bounds == true) { that.map.fitBounds(that.bounds); } else { that.map.setCenter(that.center); } }; that.initialize = function() { var latlng = that.center; var myOptions = { center: latlng, navigationControl: true, mapTypeControl: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.LARGE }, mapTypeId: that.map_type, panControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM }, scrollwheel: false, zoom: that.zoom, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_BOTTOM } }; that.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }; return that; })(); function InfoBox(opts) { google.maps.OverlayView.call(this); this.data_ = opts.data; this.type_ = opts.type; this.latlng_ = opts.latlng; this.map_ = opts.map; var me = this; this.setMap(this.map_); } InfoBox.prototype = new google.maps.OverlayView(); InfoBox.prototype.draw = function() { // Creates the element if it doesn't exist already. if(this.type_ == 'community') { this.createElement(); if (!this.div_) return; var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_); if (!pixPosition) return; // Now position our DIV based on the DIV coordinates of our bounds if(this.div_.hasClass('open')) { this.div_.css('left', (pixPosition.x + -36) + "px"); this.div_.css('top', (pixPosition.y + -158) + "px"); } else { this.div_.css('left', (pixPosition.x + -36) + "px"); this.div_.css('top', (pixPosition.y + -85) + "px"); } this.div_.css('display', 'block'); } else if(this.type_ == 'city') { this.createCityElement(); if (!this.div_) return; var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_); if (!pixPosition) return; // Now position our DIV based on the DIV coordinates of our bounds this.div_.css('left', (pixPosition.x + -38) + "px"); this.div_.css('top', (pixPosition.y + -38) + "px"); this.div_.css('display', 'block'); } }; InfoBox.prototype.createElement = function() { var me = this; var panes = this.getPanes(); var div = this.div_; var data = this.data_; if (!div) { div = this.div_ = $('&lt;div class="map_info_window" id="info_window_'+data.id+'"&gt;' +'&lt;a href="#" class="expand"&gt;Expand&lt;/a&gt;' +'&lt;div class="info_window_content"&gt;' +'&lt;div class="thumb"&gt;&lt;img src="'+data.image+'" title="'+data.title+'" /&gt;&lt;/div&gt;' +'&lt;div class="info_window_data"&gt;' +'&lt;p class="title"&gt;'+data.title+'&lt;/p&gt;' +'&lt;p class="desc"&gt;'+data.propInfo+'&lt;/p&gt;' +'&lt;a href="http://'+data.link+'" target="_blank" class="view"&gt;View Community&lt;/a&gt;' +'&lt;/div&gt;' +'&lt;/div&gt;' +'&lt;/div&gt;'); $('a.expand, .thumb', div).click(function(e) { e.preventDefault(); var pixPosition = me.getProjection().fromLatLngToDivPixel(me.latlng_); div.toggleClass('open'); if(div.hasClass('open')) { div.css('top', (pixPosition.y + -158) + "px"); div.css('z-index', 20); setTimeout(function() { $('.info_window_data', div).show('slide', {direction: 'left'}, 300); }, 100); } else { div.css('top', (pixPosition.y + -85) + "px"); div.css('z-index', 10); $('.info_window_data', div).hide(); } }); div.css('display', 'none'); $(panes.floatPane).append(div); } } InfoBox.prototype.createCityElement = function() { var me = this; var panes = this.getPanes(); var div = this.div_; var data = this.data_; if (!div) { div = this.div_ = $('&lt;div class="map_city_window"&gt;' +'&lt;a href="/find/where?query='+data.name+'"&gt;'+data.name+'&lt;/a&gt;' +'&lt;div class="arrow"&gt;arrow&lt;/div&gt;' +'&lt;/div&gt;'); div.css('display', 'none'); $(panes.floatPane).append(div); } }; </code></pre> <p>I am not sure how to integrate that function in this code, but if someone could give me some pointers, I would greatly appreciate that. A very similar example of the map I am using is this if it would help as a reference point: </p> <p><a href="http://gables.com/find/where?query=Washington%20DC" rel="nofollow">http://gables.com/find/where?query=Washington%20DC</a></p> <p>Thanks in advance for the help.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USBruce Edwards
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload