Google Map with marker list in input

• Damian P.

• April 11, 2019 at 11:13 pm

Hi 🙂

Im trying to create Google Map with markers list in select input for multiple locations. So this is my JS code:

jQuery(document).ready(function($) {
	function render_map( $el ) {
		// var
		var $markers = $(document).find('#layout-<?php echo $i; ?> .marker');
		// vars
		var args = {
			zoom        : <?php the_sub_field('map-zoom'); ?>,
			center      : new google.maps.LatLng(0, 0),
			mapTypeId   : google.maps.MapTypeId.ROADMAP,
			scrollwheel: false,
			mapTypeControlOptions: {
				mapTypeIds: [google.maps.MapTypeId.ROADMAP]
			}
		};
		// create map               
		var map = new google.maps.Map( $el[0], args);
		// add a markers reference
		map.markers = [];
		// add markers
		index=0;
		$markers.each(function(){
			add_marker( $(this), map, index);
			index++;
		});
		// center map
		center_map( map );
	}

	function add_marker( $marker, map, index ) {
		// var
		var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
		var image = '<?php echo get_template_directory_uri(); ?>/media/pin.png'
		// create marker
		var marker = new google.maps.Marker({
			position    : latlng,
			map         : map,
			icon        : image
		});
		// add to array
		map.markers.push( marker );
		// if marker contains HTML, add it to an infoWindow
		if( $marker.html() )
		{
			$('#layout-<?php echo $i; ?> .e-markers select').append('<option value="p'+index+'">'+$marker.html()+'</option>');
			// change html here if you want but leave id intact!!
			$(document).on('click', '#p'+index, function(){
				infowindow.open(map, marker);
				setTimeout(function () { infowindow.close(); }, 15000);
			});
			// create info window
			var infowindow = new google.maps.InfoWindow({
				content     : $marker.html(),
			});
			// show info window when marker is clicked
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open( map, marker );
			});
		}
	}

function center_map( map ) {
		// vars
		var bounds = new google.maps.LatLngBounds();
		// loop through all markers and create bounds
		$.each( map.markers, function( i, marker ){
			var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
			bounds.extend( latlng );
		});
		// only 1 marker?
		if( map.markers.length == 1 )
		{
			// set center of map
			map.setCenter( bounds.getCenter() );
			map.setZoom( <?php the_sub_field('map-zoom'); ?> );
		}
		else
		{
			// fit to bounds
			map.fitBounds( bounds );
		}
	}
		// Call it
			$(document).ready(function(){
			$('#layout-<?php echo $i; ?> .acf-map').each(function(){
				render_map( $(this) );
			});
		});
})(jQuery);

and loop in my theme:

<?php if( have_rows('map') ): ?>
<div class="e-markers"><select></select></div>
	<div class="acf-map">
		<?php while ( have_rows('map') ) : the_row(); 
			$location = get_sub_field('map-location'); ?>
			<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
				<h4><?php the_sub_field('map-title'); ?></h4>
				<p><?php echo $location['address']; ?></p>
				<article><?php the_sub_field('map-content'); ?>
                                </article>
			</div>
		<?php endwhile; ?>
	</div>
<?php endif; ?>

The problem is that I can’t figure out how to wrap my markers in working select input. Also, in <options> I need show only map titles, so only <h4> tag from div.marker element.

Maybe someone did something similar?

Thanks for help!