Solved

Insert google map in custom taxonomy template

Posted on 2014-02-07
7
429 Views
Last Modified: 2014-02-09
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
0
Comment
Question by:glepiza
  • 4
  • 3
7 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 300 total points
ID: 39843524
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
 

Author Comment

by:glepiza
ID: 39843578
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
 

Author Comment

by:glepiza
ID: 39843588
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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
LVL 38

Accepted Solution

by:
Tom Beck earned 300 total points
ID: 39843660
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39843666
0
 

Author Comment

by:glepiza
ID: 39845588
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39845594
You're welcome. Glad you worked it out. Thanks for the points.
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Do you think that WordPress is just for blogs?  Think again!  WordPress is really a fantastic all around platform that you can use to develop websites on.  Integrated into its basic functionality is the ability to create pages using your choice of a…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question