Support

Account

Home Forums Front-end Issues Google Map with marker list in input

Unread

Google Map with marker list in input

  • 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!

Viewing 1 post (of 1 total)

The topic ‘Google Map with marker list in input’ is closed to new replies.