[Google Maps API] How to list markers and their information when the associated Google Maps isn't visible.
<div id="results-container"> | |
<h3>Results</h3> | |
<ul id="results-list"> | |
</ul><!-- #results-list --> | |
</div><!-- #results-container --> |
/** | |
* The code below assumes: | |
* | |
* 1. You've added all of the markers to an array earlier in your code when plotting the map. | |
* 2. You have access to the jQuery object by using the '$' shortcut. How you opt to achieve | |
* this is outside the scope of this gist. | |
* 3. The `bounds` and the `markers` variables are defined outside the scope of this function | |
* when plotting the map. | |
* | |
* If you have questions about any of the above assumptions, please read further articles here: | |
* https://tommcfarlin.com/tag/google-maps-api/ | |
*/ | |
var current_marker; | |
google.maps.event.addListener( map, 'idle', function() { | |
// Read the bounds of the map being displayed. | |
bounds = map.getBounds(); | |
// Iterate through all of the markers that are displayed on the *entire* map. | |
for ( i = 0, l = markers.length; i < l; i++ ) { | |
current_marker = markers[ i ]; | |
/* If the current marker is visible within the bounds of the current map, | |
* let's add it as a list item to #nearby-results that's located above | |
* this script. | |
*/ | |
if ( bounds.contains( current_marker.getPosition() ) ) { | |
/* Only add a list item if it doesn't already exist. This is so that | |
* if the browser is resized or the tablet or phone is rotated, we don't | |
* have multiple results. | |
*/ | |
if ( 0 === $( '#map-marker-' + i ).length ) { | |
$( '#results-list' ).append( | |
$( '<li />' ) | |
.attr( 'id', 'map-marker-' + i ) | |
.attr( 'class', 'depot-result' ) | |
.html( current_marker.content ) | |
); | |
} | |
} | |
} | |
}); |
(function( $ ) { | |
// First, we have to force the size of the map in order to determine the results | |
$(function() { | |
if ( 768 > $( window ).width() ) { | |
$( '#map-canvas' ) | |
.height( 100 ) | |
.width( '100%' ) | |
.css( 'visibility', 'hidden' ) | |
} | |
$( window ).on( 'resize', function() { | |
if ( 768 <= $( window ).width() ) { | |
$( '#map-canvas' ) | |
.height( 'auto' ) | |
.width( '100%' ) | |
.css( 'visibility', 'visible' ) | |
.show(); | |
} | |
}); | |
}); | |
})( jQuery ); |
/** | |
* The code below assumes: | |
* | |
* 1. You've added all of the markers to an array earlier in your code when plotting the map. | |
* 2. You have access to the jQuery object by using the '$' shortcut. How you opt to achieve | |
* this is outside the scope of this gist. | |
* 3. The `bounds` and the `markers` variables are defined outside the scope of this function | |
* when plotting the map. | |
* | |
* If you have questions about any of the above assumptions, please read further articles here: | |
* https://tommcfarlin.com/tag/google-maps-api/ | |
*/ | |
var current_marker; | |
google.maps.event.addListener( map, 'idle', function() { | |
// Read the bounds of the map being displayed. | |
bounds = map.getBounds(); | |
// Iterate through all of the markers that are displayed on the *entire* map. | |
for ( i = 0, l = markers.length; i < l; i++ ) { | |
current_marker = markers[ i ]; | |
/* If the current marker is visible within the bounds of the current map, | |
* let's add it as a list item to #nearby-results that's located above | |
* this script. | |
*/ | |
if ( bounds.contains( current_marker.getPosition() ) ) { | |
/* Only add a list item if it doesn't already exist. This is so that | |
* if the browser is resized or the tablet or phone is rotated, we don't | |
* have multiple results. | |
*/ | |
if ( 0 === $( '#map-marker-' + i ).length ) { | |
$( '#results-list' ).append( | |
$( '<li />' ) | |
.attr( 'id', 'map-marker-' + i ) | |
.attr( 'class', 'depot-result' ) | |
.html( current_marker.content ) | |
); | |
} | |
} | |
// Now hide the map. | |
if ( 768 > $( window ).width() ) { | |
$( '#map-canvas' ).hide(); | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment