asked on

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

SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

glepiza

ASKER

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

glepiza

ASKER

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?

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tom Beck

Similar coding found in this complete example:

https://www.experts-exchange.com/questions/28161118/google-map.html?anchorAnswerId=39262289#a39262289

glepiza

ASKER

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

Tom Beck

You're welcome. Glad you worked it out. Thanks for the points.