?
Solved

Insert google map in custom taxonomy template

Posted on 2014-02-07
7
Medium Priority
?
456 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 900 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 900 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
This video teaches users how to migrate an existing Wordpress website to a new domain.

777 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