Solved

Insert google map in custom taxonomy template

Posted on 2014-02-07
7
437 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Backup Solution for AWS

Read about how CloudBerry Backup fully integrates your backups with Amazon S3 and Amazon Glacier to provide military-grade encryption and dramatically cut storage costs on any platform.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
This article will shed light on the latest trends when it comes to your resume building needs. For far too long, the traditional CV format has monopolized the recruitment market.
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

733 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