Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[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