Custom fields and Google Map

Dear experts,

I am using Advance Custom Fields plugin to create some custom fields on my new custom post type. One of the things Iwould like to do is to have  a google map APi to display all the address that are stored on my custom fields. I am not a pro in coding so it is taking me quite long to figure this out and my deadline is so close….

I am using an add-on from advance custom field plugin named Google Maps, which allows me to place a google map into each post (still figuring this out, but I will leave that for later). For now I just need to display a map that marks all the addresses from each custom post type.

Here is the code I am using to display the custom fields. As you can see from the code, there is a custom field named address. how can I collect all those addresses to place a marker in a google maps?

remove_action('genesis_loop', 'genesis_do_loop');//remove genesis loop
add_action('genesis_loop', 'places_loop');//add the special loop
function accommodations_loop() {
    $loop = new WP_Query( array( 'post_type' => 'places', 'posts_per_page' => 4, 'paged' => get_query_var( 'paged' ) ) ); ?>
                <h1><?php the_title(); ?></h1>
            <div id="places">
                      <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                              <div class="places">
                                    <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                                    <div id="post-<?php the_ID(); ?>" class="list">
                              <?php//use the genesis_get_custom_field template tag to display each custom field value ?>
                                    <div><?php echo the_post_thumbnail('custom-thumb-1'); ?></div>
                              <div><?php echo the_field('intro_text'); ?></div>
                                    <div><?php echo the_field('address'); ?></div>
                              <div><?php echo the_field('phone_number'); ?></div>
                              <div><?php echo the_field('website'); ?></div>
                        </div><!--end #specials -->
    <?php endwhile;?>

I would really appreciate any help. Thanks
Who is Participating?
Tom BeckConnect With a Mentor Commented:
Here is something to try. Declare a php array to hold the addresses at the beginning of your loop. Then collect the addresses in the array.

<?php $addresses = array(); while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $address = $wpdb->get_var("SELECT meta_value FROM wp_postmeta WHERE post_id=$post->ID AND meta_key='Address'");
          array_push($addresses, $address); ?>


Then, right after the end of the loop add a div to hold the map (you can move it later).

<?php endwhile; ?>            
<div id="map-canvas" style="width:400px;height:300px"></div>

Just below that, place the javascript to load the map with the geocoded markers.
<script src="" type="text/javascript"></script>
			<script type="text/javascript">
			var locations = <?php echo json_encode($addresses); ?>;
			if (locations.length > 0) {
				var bounds = new google.maps.LatLngBounds();
				var geocoder = new google.maps.Geocoder();
				var startingPoint = new google.maps.LatLng(41.88318,-87.63173);
		    var mapOptions = {
            	zoom: 15,
                center: startingPoint,
                mapTypeId: google.maps.MapTypeId.ROADMAP

             var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
             var marker = new google.maps.Marker({
                map: map,
                icon: "",
                position: startingPoint

            var chunk = 0;
			// muliple location geocoding needs to be done on a delay as Google restricts the number of
			// consecutive geocode requests
            var interval = setInterval(function() {delayCode();}, 700);
            function delayCode() {
                  var step = 1;
                  if (chunk < locations.length) {
                        for (x = chunk; x < locations.length && x < chunk + step; x++) {
                        chunk += step;
                  } else{

            function codeAddress(address) {
			   if (address !== '') {
                  geocoder.geocode({ 'address': address }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                        	addressLoc = results[0].geometry.location;		
			   	            createMarker(addressLoc, address);
                        else {
                            console.log('Geocode was not successful for the following reason: ' + status);

			function createMarker(loc, address){
				var marker = new google.maps.Marker({map: map, position: loc});
				var infowindow = new google.maps.InfoWindow();
			      google.maps.event.addListener(marker, "click", function () {
                	  infowindow.setContent('<b>' + address + '</b>');
         , this);
				  //extend the bounds of the map to include all the markers and the starting point
				  //zoom the map to nicely fit the bounds of the markers

Open in new window

I have no way of testing it with your loop and your custom fields, but it worked in my simple test.
Ray PaseurCommented:
This is not specific to Wordpress, but it's probably background information you would want to understand if you're getting into using Google Maps.
Tom BeckCommented:
Did you get this resolved?
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

glepizaAuthor Commented:
not yet :(. Still looking...
Tom BeckCommented:
Looks like your field named "address" is lower case so be sure to adjust that in the sql statement.
meta_key='address' instead of meta_key='Address'
glepizaAuthor Commented:
Tom, you are a genius!!, thank you very much. Sorry for taking too much time answering, I got couple of stuff in my website, so I needed to fix that first but it took me so long….

Thank you again!!!!

glepizaAuthor Commented:
Thank you!!!!!!!!!!!
Tom BeckCommented:
You're welcome. That worked right out of the box? Pleasant surprise.

I have this as the starting point in the javascript:
var startingPoint = new google.maps.LatLng(41.88318,-87.63173);
Which I think is somewhere in Chicago so you might want to change that to something local for you. If the geocoding were to fail, you would be displaying a map of part of Chicago on your site.

Thanks for the points.
All Courses

From novice to tech pro — start learning today.