Solved

Insert google map in custom taxonomy template

Posted on 2014-02-07
7
424 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
[Webinar] Disaster Recovery and Cloud Management

Learn from Unigma and CloudBerry industry veterans which providers are best for certain use cases and how to lower cloud costs, how to grow your Managed Services practice in IaaS clouds, and how to utilize public cloud for Disaster Recovery

 
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Red number appears in lower right corner of browser with warning 8 68
Gradient CSS 4 30
Centering Vertically 3 27
remove background quote mark from widget 6 19
WordPress can be pretty daunting, especially for a beginner, so I thought it might be a good idea to write an article to show how easy it is to get started in WordPress and to design a custom theme.  The first step is to check with your hosting comp…
In this article, we will look at our content management system as a whole, to get an idea of how we will start to manage these content items.
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

911 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now