Support » Themes and Templates » Google Maps and WordPress themes

  • I’m messing with the Google Maps API this morning. Everything is working fine until I apply template. Any ideas on what I’m missing here.

    This page is working fine but this one with theme is barfing my Google Maps API key.

    Any input is greatly appreciated.


Viewing 5 replies - 1 through 5 (of 5 total)
  • The API is folder specific (and doesn’t allow subfolders either), you can however include your map.html in your post/page with an iframe. There might be another way but that worked for me.

    Works now – thanks for the hint.

    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, “” is different than “” even if you have registered “”.

    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. –>
    global $GMap_X_Val;
    global $GMap_Y_Val;
    global $GMap_Info;
    if ( ! (empty($GMap_X_Val) && empty($GMap_Y_Val)) )
    <script src=”**YOUR KEY**” type=”text/javascript”></script>

    <script type=”text/javascript”>

    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() {

    <?php } ?>
    <!– Done drawing a map maybe –>


    And then add this code over to “single.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.


    I can’t edit that last post…but the subfolder thing is still a problem. So strike that paragraph about subfolders working. We thought we had the problem and it was fixed but in reality we were looking at the “sub-domain” issue.



    I’ve written some Javascript and an article on embedding Google Maps in WP posts. Interesting problem with the Google Maps API Keys being good for one directory only.


Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Google Maps and WordPress themes’ is closed to new replies.