-
-
Save tommcfarlin/5c774e079467f664f593 to your computer and use it in GitHub Desktop.
[Google Maps API] How to list markers and their information when the associated Google Maps isn't visible.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="results-container"> | |
<h3>Results</h3> | |
<ul id="results-list"> | |
</ul><!-- #results-list --> | |
</div><!-- #results-container --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 ) | |
); | |
} | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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