Support

Home Forums Add-ons User Submitted Multiple Post Points on Google Maps

Solved

Multiple Post Points on Google Maps

    • cmdbase

    • July 30, 2014 at 11:50 pm

    Happy to help!

  • PHP-file:
    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" data-col="YOUR_ACF_VARIABLE">

    jQuery:

    <script type="text/javascript">
    (function($) {
     
    /*
    *  render_map
    *
    *  This function will render a Google Map onto the selected jQuery element
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$el (jQuery element)
    *  @return	n/a
    */
     
    function render_map( $el ) {
     
    	// var
    	var $markers = $el.find('.marker');
     
    	// vars
    	var args = {
    		zoom		: 16,
    		center		: new google.maps.LatLng(0, 0),
    		mapTypeId	: google.maps.MapTypeId.ROADMAP
    	};
     
    	// create map	        	
    	var map = new google.maps.Map( $el[0], args);
     
    	// add a markers reference
    	map.markers = [];
     
    	// add markers
    	$markers.each(function(){
     
        	add_marker( $(this), map );
     
    	});
     
    	// center map
    	center_map( map );
     
    }
     
    /*
    *  add_marker
    *
    *  This function will add a marker to the selected Google Map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$marker (jQuery element)
    *  @param	map (Google Map object)
    *  @return	n/a
    */
     
    function add_marker( $marker, map ) {
     
    	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    	var color = $marker.attr('data-col');
    
    	if(color === "YOUR_ACF_VARIABLE") { var pincolor = 'teal'; }
    	else if(color === "YOUR_ACF_VARIABLE") { var pincolor = 'red'; }
    
    	function pinSymbol(color) {
    		return {
    			path: 'm56.9631,0.75c-31.05667,0 -56.2131,25.16236 -56.2131,56.20168c0,31.05099 56.2131,135.79832 56.2131,135.79832s56.19011,-104.74733 56.19011,-135.79832c0,-31.03931 -25.15656,-56.20168 -56.19011,-56.20168zm0,83.06174c-14.84224,0 -26.87169,-12.01827 -26.87169,-26.86006s12.02945,-26.85426 26.87169,-26.85426s26.84848,12.02344 26.84848,26.85426s-12.0293,26.86006 -26.84848,26.86006z',
    			fillColor: color,
    			fillOpacity: .9,
    			strokeColor: '#000',
    			strokeWeight: 1,
    			scale: .2,
    			};
    		}
    
    	var marker = new google.maps.Marker({
    		position: latlng,
    		map: map,
    		icon: pinSymbol(pincolor)
    		});
     
    	// add to array
    	map.markers.push( marker );
     
    	// if marker contains HTML, add it to an infoWindow
    	if( $marker.html() )
    	{
    		// 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 );
     
    		});
    	}
     
    }
     
    /*
    *  center_map
    *
    *  This function will center the map, showing all markers attached to this map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	map (Google Map object)
    *  @return	n/a
    */
     
    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( 14 );
    	}
    	else
    	{
    		// fit to bounds
    		map.fitBounds( bounds );
    	}
     
    }
     
    /*
    *  document ready
    *
    *  This function will render each map when the document is ready (page has loaded)
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	5.0.0
    *
    *  @param	n/a
    *  @return	n/a
    */
     
    $(document).ready(function(){
     
    	$('.acf-map').each(function(){
     
    		render_map( $(this) );
     
    	});
     
    });
     
    })(jQuery);
    </script>
    • elv1s

    • October 10, 2014 at 8:28 pm

    Hi there,

    the code is working fine so fare…. but, if i´ve more than 10 markers that should load… it´s not working. Only up to 10 markers are shown on the map. It´s probably because of “OVER_QUERY_LIMIT”.

    My code looks like:

    
    <style type="text/css">
     .acf-map {
    	width: 960px;
    	height: 400px;
    	border: #ccc solid 1px;
    	margin: 10px 2px 20px;
    }
     </style>
    			<?php 
    				$mapposts = new WP_Query( array( 
    									'post_status' => 'publish', 
    									'post_type' => 'hotel', 
    									) );
    			?>
    			
    		<div class="acf-map">
    
    			<?php while ( $mapposts->have_posts() ) : $mapposts->the_post(); ?>
    	<?php
    				$location = get_field('google_maps');
    				$gtemp = explode (',',  implode($location));
    				$coord = explode (',', implode($gtemp));
    ?>
    
    				<div class="marker" data-lat="<?php echo $location[lat]; ?>" data-lng="<?php echo $location[lng]; ?>">
    					<p class="address"><?php the_title(); ?></p>		
    				</div>
    
    						
    			<?php endwhile; ?>
    			
    		</div><!-- .acf-map -->
     
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
    (function($) {
    
    /*
    *  render_map
    *
    *  This function will render a Google Map onto the selected jQuery element
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$el (jQuery element)
    *  @return	n/a
    */
    
    function render_map( $el ) {
    
    // var
    var $markers = $el.find('.marker');
    
    // vars
    var args = {
    	zoom		: 16,
    	center		: new google.maps.LatLng(0, 0),
    	mapTypeId	: google.maps.MapTypeId.ROADMAP
    };
    	
    // create map	        	
    var map = new google.maps.Map( $el[0], args);
    
    // add a markers reference
    map.markers = [];
    	
    	
    	
    	
    // add markers
    $markers.each(function(){
    
    	add_marker( $(this), map );
    
    });
    
    // center map
    center_map( map );
    	
    	
    }
    
    // create info window outside of each - then tell that singular infowindow to swap content based on click
    var infowindow = new google.maps.InfoWindow({
    content		: '' 
    });
    
    /*
    *  add_marker
    *
    *  This function will add a marker to the selected Google Map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$marker (jQuery element)
    *  @param	map (Google Map object)
    *  @return	n/a
    */
    
    function add_marker( $marker, map ) {
    
    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    
    // create marker
    var marker = new google.maps.Marker({
    	position	: latlng,
    	map			: map
    });
    
    // add to array
    map.markers.push( marker );
    
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
    	
    	
    	
    
    	// show info window when marker is clicked & close other markers
    	google.maps.event.addListener(marker, 'click', function() {
    		//swap content of that singular infowindow
    				infowindow.setContent($marker.html());
    		        infowindow.open(map, marker);
    	});
    	
    	// close info window when map is clicked
    	     google.maps.event.addListener(map, 'click', function(event) {
    	        if (infowindow) {
    	            infowindow.close(); }
    			}); 
    			
    		
    }
    
    }
    
    /*
    *  center_map
    *
    *  This function will center the map, showing all markers attached to this map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	map (Google Map object)
    *  @return	n/a
    */
    
    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( 16 );
    }
    else
    {
    	// fit to bounds
    	map.fitBounds( bounds );
    }
    
    }
    
    /*
    *  document ready
    *
    *  This function will render each map when the document is ready (page has loaded)
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	5.0.0
    *
    *  @param	n/a
    *  @return	n/a
    */
    
    $(document).ready(function(){
    
    $('.acf-map').each(function(){
    
    	render_map( $(this) );
    
    });
    
    });
    
    })(jQuery);
    </script>
    

    Is anybody experiencing the same problem? Does somebody know how to fix this?

    Thanks

    • cmdbase

    • October 11, 2014 at 5:58 am

    Looks like your WP Query is falling back on Settings > Reading > Posts per page. (Default on WordPress is 10 posts per page)

    Override that by adding this to your query:

    <?php 
    $mapposts = new WP_Query( array( 
    'post_status' => 'publish', 
    'post_type' => 'hotel', 
    'posts_per_page'  => -1, //sets to unlimited to pull all posts
    ) );
    ?>
    • elv1s

    • October 11, 2014 at 10:55 pm

    Hi cmdbase,

    thanks for your reply.

    i get the following error:

    Warning: implode() [function.implode]: Argument must be an array in /wp-content/themes/mytheme/page.php on line 42

    thanks.

    • elv1s

    • October 11, 2014 at 11:08 pm

    edit: when i choose a number within the reach of the number of post it works.
    So, i´ve 50 posts with geo-data. When i choose 10, 15, 20, 49 it works.

    But when i choose -1 or 75, 100 etc. it throws the error.

    Of course i could edit the php-file every time i add a marker… but that´t obviously not the way to go ;).

    Thanks

  • the code here works well, thanks all.
    Has anyone experimented with filtering the results?
    I’ve used things like filterwp and search and filter pro, but they dont work well with custom queries.
    Just wondering if anyone has had success with that.
    Thanks again.

  • @cmdbase

    Thanks for your code, it’s exactly what I was looking for.
    Davide

  • I just can’t get this work.. Here is my one map that should get pins from all my posts. http://myplejs.staging.wpengine.com/karta/
    As you can see the maps works here: http://myplejs.staging.wpengine.com/objects/154755/

    This is my code:

    
    
    				<style type="text/css">
     .acf-map {
    	width: 960px;
    	height: 400px;
    	border: #ccc solid 1px;
    	margin: 10px 2px 20px;
    }
     </style>
    
    <script type="text/javascript">
    (function($) {
    
    /*
    *  render_map
    *
    *  This function will render a Google Map onto the selected jQuery element
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$el (jQuery element)
    *  @return	n/a
    */
    
    function render_map( $el ) {
    
    // var
    var $markers = $el.find('.marker');
    
    // vars
    var args = {
    	zoom		: 16,
    	center		: new google.maps.LatLng(0, 0),
    	mapTypeId	: google.maps.MapTypeId.ROADMAP
    };
    	
    // create map	        	
    var map = new google.maps.Map( $el[0], args);
    
    // add a markers reference
    map.markers = [];
    	
    	
    	
    	
    // add markers
    $markers.each(function(){
    
    	add_marker( $(this), map );
    
    });
    
    // center map
    center_map( map );
    	
    	
    }
    
    // create info window outside of each - then tell that singular infowindow to swap content based on click
    var infowindow = new google.maps.InfoWindow({
    content		: '' 
    });
    
    /*
    *  add_marker
    *
    *  This function will add a marker to the selected Google Map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	$marker (jQuery element)
    *  @param	map (Google Map object)
    *  @return	n/a
    */
    
    function add_marker( $marker, map ) {
    
    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    
    // create marker
    var marker = new google.maps.Marker({
    	position	: latlng,
    	map			: map
    });
    
    // add to array
    map.markers.push( marker );
    
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
    	
    	
    	
    
    	// show info window when marker is clicked & close other markers
    	google.maps.event.addListener(marker, 'click', function() {
    		//swap content of that singular infowindow
    				infowindow.setContent($marker.html());
    		        infowindow.open(map, marker);
    	});
    	
    	// close info window when map is clicked
    	     google.maps.event.addListener(map, 'click', function(event) {
    	        if (infowindow) {
    	            infowindow.close(); }
    			}); 
    			
    		
    }
    
    }
    
    /*
    *  center_map
    *
    *  This function will center the map, showing all markers attached to this map
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	4.3.0
    *
    *  @param	map (Google Map object)
    *  @return	n/a
    */
    
    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( 16 );
    }
    else
    {
    	// fit to bounds
    	map.fitBounds( bounds );
    }
    
    }
    
    /*
    *  document ready
    *
    *  This function will render each map when the document is ready (page has loaded)
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	5.0.0
    *
    *  @param	n/a
    *  @return	n/a
    */
    
    $(document).ready(function(){
    
    $('.acf-map').each(function(){
    
    	render_map( $(this) );
    
    });
    
    });
    
    })(jQuery);
    </script>
    
    			<?php 
    				$mapposts = new WP_Query( array( 
    									'post_status' => 'publish', 
    									'post_type' => 'objects',
    									'posts_per_page'  => -1, //sets to unlimited to pull all posts 
    									) );
    			?>
    			
    		<div class="acf-map">
    
    			<?php while ( $mapposts->have_posts() ) : $mapposts->the_post(); ?>
    			<?php
    				$location = get_field('obj_map');
    				$gtemp = explode (',',  implode($location));
    				$coord = explode (',', implode($gtemp));
    ?>
    
    				<div class="marker" data-lat="<?php echo $location[lat]; ?>" data-lng="<?php echo $location[lng]; ?>">
    					<p class="address"><?php  echo $gtemp[0]; ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>		
    				</div>
    						
    			<?php endwhile; ?>
    			
    		</div><!-- .acf-map -->
     
    			<?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>
  • Solved it, spot the difference, ad missed the ” :

    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
    
    <div class="marker" data-lat="<?php echo $location[lat]; ?>" data-lng="<?php echo $location[lng]; ?>"></div>
    • prana

    • June 16, 2015 at 4:38 am

    Hi,
    For the multiple marker issue. Found a very quick fix to hide an open one when you click on a new one:

    In your add_marker function

    function add_marker( $marker, map ) {
    
    	// var
    	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    
    	// create marker
    	var marker = new google.maps.Marker({
    		position	: latlng,
    		map			: map
    	});
    
    	// add to array
    	map.markers.push( marker );
    
    	// if marker contains HTML, add it to an infoWindow
    	if( $marker.html() )
    	{
    		// 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() {
    			// added in to close the previous open info window
    			if($('.gm-style-iw').length) {
    				$('.gm-style-iw').parent().hide();
        		}
    
    			infowindow.open( map, marker );
    
    		});
    	}
    
    }

    In the click listener add in see above

    if($('.gm-style-iw').length) {
    				$('.gm-style-iw').parent().hide();
        		}

    This checks if the map has a window open, if so hides it.

    Hope this helps!

  • I have “small” problem with this. Map shows all markers where there is inserted address in Map fields and just one marker from by date next Post where nothing is inserted.

    If I open Post edit and insert address it just shows next without address by date. Somewhere in the Atlantic, under Africa, Equator.

Viewing 12 posts - 26 through 37 (of 37 total)

You must be logged in to reply to this topic.