Insert google map in custom taxonomy template

Hi experts,

I am trying to add a Google Map in a custom taxonomy template named taxonomy-placestaxonomies.php

This is the code that I have inside that template:

<div id="map-canvas" style="width: 100%; height: 100%"></div>
<?php
 
function be_directory_metadata() {
      
      echo '<div id="address">'  . genesis_get_custom_field('place') . '</div>';
       echo '<div id="address">'  . genesis_get_custom_field('wpcf-address') . '</div>';
      echo '<div class="more-info"><a href="' . get_permalink() .'">More Info</a></div>';

  echo'</div>';

}
add_action( 'genesis_entry_content', 'be_directory_metadata' ); // For HTML5
add_action( 'genesis_post_content', 'be_directory_metadata' ); // For HTML4
 
genesis();


According to Google API, I need to get the latitude and longitude from the custom field address. But I am not sure how to do that and where should I place that code.

Could you please guide me on this?

Thanks,

winter
glepizaAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
You cannot pass an array of addresses to the geocoder if that's what $addresses is. You must feed them in one at a time. In fact, you must add a delay between them or Google will balk about making too many requests at one time.

So maybe something like this would work (untested):
<div id="map-canvas" style="width: 100%; height: 100%"></div>
<?php
 
$addresses = genesis_get_custom_field('wpcf-address');
 
genesis();
?>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=geometry" type="text/javascript"></script>
<script>  
/*** Add code here to draw the map with a logical center point and zoom level***/
/***Then geocode the addresses one at a time on a delay and create markers***/
 var addresses = <?php echo $addresses ?>; 
 var geocoder = new google.maps.Geocoder();
 var interval;
 if (addresses.length > 0 ) {
     interval = setInterval(delayCode, 700);
}
function delayCode() {
     var chunk = 0;
     var step = 1;
     if (chunk < addresses.length) {
            for (x = chunk; x < addresses.length && x < chunk + step; x++) {
                  codeAddress(addresses[x]);
             }
             chunk += step;
      } else{
             clearInterval(interval);
      }
 }

function codeAddress(address) {
	        if (address !== '') {
                  geocoder.geocode({ 'address': address }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                        	var latlng = results[0].geometry.location;
                                /*** create a marker for each address here, set lat/lng for marker***/
                                /*** stretch the map's bounds and adjust the zoom to fit all markers***/
                        }
                        else {
                            console.log('Geocode was not successful for the following reason: ' + status);
                        }
                  });
            }
}
</script>

Open in new window

0
 
Tom BeckConnect With a Mentor Commented:
Somewhere after the code you posted with the question, add javascript to geocode the address. If the geocoding is successful, display the map and create a marker at the address.
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=geometry" type="text/javascript"></script>
<script>            
	   var geocoder = new google.maps.Geocoder();
            var address = document.getElementById('address').innerHTML;
	        if (address !== '') {
                  geocoder.geocode({ 'address': address }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                        	var latlng = results[0].geometry.location;
                                /*** The rest of your map code here***/
                        }
                        else {
                            console.log('Geocode was not successful for the following reason: ' + status);
                        }
                  });
            }
</script>

Open in new window

Be mindful with the code you created. You cannot use id="address" twice on the same page.
0
 
glepizaAuthor Commented:
Hi Tom,Hi To, thank you very much for your answer.

I added the code in my template, but I keep getting InvalidValueError: unknown property wpcf-address. Not pretty sure why since I place the code inside the function. Maybe it is because it is a custom field?

This is how I have :
function be_directory_metadata() {
	
    echo '<div>';
 	echo '<div id="address">'  . genesis_get_custom_field('wpcf-address') . '</div>';
	echo '<div id="phone-number">'  . genesis_get_custom_field('wpcf-phone-number') . '</div>';
	

  echo'</div>';
	?>
	<script>            
		   var geocoder = new google.maps.Geocoder();
	            var address = document.getElementById('address').innerHTML;
		        if (address !== '') {
	                  geocoder.geocode({ 'wpcf-address': address }, function(results, status) {
	                        if (status == google.maps.GeocoderStatus.OK) {
	                        	var latlng = results[0].geometry.location;
	                                /*** The rest of your map code here***/
	                        }
	                        else {
	                            console.log('Geocode was not successful for the following reason: ' + status);
	                        }
	                  });
	            }
	</script> 
	<?php

}
add_action( 'genesis_entry_content', 'be_directory_metadata' ); // For HTML5
add_action( 'genesis_post_content', 'be_directory_metadata' ); // For HTML4
 
genesis();

Open in new window


Thank you in advance
0
Improve Your Query Performance Tuning

In this FREE six-day email course, you'll learn from Janis Griffin, Database Performance Evangelist. She'll teach 12 steps that you can use to optimize your queries as much as possible and see measurable results in your work. Get started today!

 
glepizaAuthor Commented:
ok, I fixed the last issue declaring the variable;

      $addresses = genesis_get_custom_field('wpcf-address');

and calling it from the javascript:

                        geocoder.geocode({ '<?php echo $addresses; ?>': address }, function(results, status) {


But know I get this error in firebug console:

InvalidValueError: unknown property 3035 Fuller Street, Madrid Spain

It is seems it is retrieving the value inside wpcg-address. But why does it appears like an error?
0
 
Tom BeckCommented:
0
 
glepizaAuthor Commented:
Hello Tom,

Thank you very much for all your help. I actually did learn a lot. Unfortunately for some reason, I could not get the map to show on the custom taxonomy template but it seems it is because I could not get the code to work properly in Genesis Template.
Because I am running out of time to deliver my project and there is still so much to do, I decided to buy a plugin that seemed to do what I needed. It is CP Post Map.

But I will give you all the points because you did helped me and I actually learned a lot from your answers and that is pretty valuable to me.

Thanks again
0
 
Tom BeckCommented:
You're welcome. Glad you worked it out. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.