I justed finished adding google maps to our Food News site. It works great and there were only two files in our theme to get it working.
I noted the post earlier about the key not working with subfolders. I am not sure if there was an API change or not but it does work with subfolders just fine. It does not work with a different root. For example, “www.name.com” is different than “name.com” even if you have registered “name.com”.
The following outlines the issues with putting the map into posts.
1. You can not run the map in a “div” it must be outside. Therefore, in the item you can retireive the Long/Lat fields, check to see if you have them for that post. But you have to do the mapping all the way down in the Word Press Footer to get out the the “page” division. This also means setting up a global to pass those parameters since Word Press calls a subroutine to get the footer and the local variables are gone. The reason for putting the code at the end is…
2. We just manually added a custom field to a post that wants to have a map. Then the map code is used only if there is information about it. Also to avoid loading the Google program on a page that will not use it, we again had to move to the footer the logic to skip that if there is no location data.
Here is the two places for the code…
================================
in “footer.php” at the very end….
<?php wp_footer(); ?> <<<<<existing line to show where this code goes
<!– This is the start of drawing of a map…if the parameters have been set previously. –>
<?php
global $GMap_X_Val;
global $GMap_Y_Val;
global $GMap_Info;
if ( ! (empty($GMap_X_Val) && empty($GMap_Y_Val)) )
{
?>
<script src=”https://maps.google.com/maps?file=api&v=1&key=**YOUR KEY**” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
<?php
echo “var point = new GPoint( $GMap_X_Val , $GMap_Y_Val );\n” ;
echo “var html = ” . “‘” . $GMap_Info . “‘ ;\n” ;
?>
var map = new GMap(document.getElementById(“map”));
map.addControl(new GLargeMapControl());
map.centerAndZoom(point, 4);
map.addControl(new GMapTypeControl());
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
//]]>
</script>
<?php } ?>
<!– Done drawing a map maybe –>
</body>
</html>
==========================================
And then add this code over to “single.php”:
<?php
Global $GMap_X_VAl;
Global $GMap_X_Val;
Global $GMap_Info;
$GMap_X_Val = get_post_meta($post->ID , “longitude” , true) ;
$GMap_Y_Val = get_post_meta($post->ID , “latitude”, true);
if ( ! (empty($GMap_X_Val) && empty($GMap_Y_Val) ))
{
$GMap_Info = the_title(”,”,false);
echo “Longitude $GMap_X_Val , Latitude $GMap_Y_Val.”;
?>
<div id=”map” style=”width: 500px; height: 400px; outline: #FF0000 dotted medium; border: medium dashed #FF0000; display: block” >
A map will be added here in a few days.</div>
<?php } ?>
<?php comments_template(); ?>
NOTE the “comments_templage” is in the existing file and is include here to show where to place the code.
=================================
Anyhow this worked great and the cool extensibility of Word Press allowed us to simple add the location data where we had it and leave it out where we don’t.
If you can think of a better way to pass these parameters around let us know since having the “globals” to get around the positioning issues with Google maps is a hack.
Hope that helps.
Bernie.
