ThemeShaper Forums » Thematic


gmap api problem in thematic

(3 posts)
  • Started 9 years ago by EricPeterson
  • Latest reply from kwight
  • This topic is not resolved
  1. EricPeterson

    I've generally used the default twentyten theme in my own websites. Now I'm helping to put together a website where the main developer early-on went with the thematic theme. I like its flexibility, but I'm having troubles getting a gmap to display correctly (gmap api v3), and I'm a rather light-weight in web development, so am getting lost in solving the problem. My guess is that somehow thematic is interfering with the css coming from google.

    My goal is a simple plugin that will create a google map when called by a shortcode. The map must also be able to display a kml file with pop-up balloons. (code below).

    I worked on this under twentyten and it looked great. I moved it to the thematic site, and suddenly the gmap controls were looking messed up or missing and the pop-up balloons show only as a few blocks of white (some versions of IE don't show anything but the underlying map). I confirmed that thematic is part of the problem by installing it on my own testing site - the result was identical. For the moment, you can see this in my testing site:

    What can I do to fix this other than giving up on thematic and switching to twentyten?


    Two files:
    - an html base file that contains much of the relevant info
    - a php plugin file that loads the html into a variable, massages it, then sends it to word press for output


    <!DOCTYPE html>
    <script type="text/javascript" src=""></script>

    <script type="text/JavaScript">

    function egmap_init() {
    var latlng = new google.maps.LatLng(40.73, -122.94);

    var myOptions = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.[egmap_type],
    scrollwheel: true
    var map = new google.maps.Map(document.getElementById("egmap"), myOptions);



    <div id="egmap" style="width: [egmap_width]px; height: [egmap_height]px; border: 4px double black;">

    <script type="text/JavaScript">
    window.onload = egmap_init();


    //define plugin defaults

    DEFINE('egmap_width', '600');

    DEFINE('egmap_height', '400');

    DEFINE('egmap_type', 'SATELLITE');

    DEFINE('egmap_type', 'kml');

    DEFINE('egmap_other', '');

    //add the shortcode category

    add_shortcode("egmap", "egmap_shortcode_handler");

    //print all the final output to the screen

    function egmap_shortcode_handler($incomingfrompost) {


    'width' => egmap_width,

    'height' => egmap_height,

    'type' => egmap_type,

    'kml' => egmap_kml,

    'other' => egmap_other

    ), $incomingfrompost);

    $egmap_output = egmap_shortcode_function($incomingfrompost);

    return $egmap_output ;


    //do the work

    function egmap_shortcode_function($incomingfromhandler) {

    //setup the values as input from the shortcode

    $egmap_width = wp_specialchars_decode($incomingfromhandler["width"]);

    $egmap_height = wp_specialchars_decode($incomingfromhandler["height"]);

    $egmap_type = wp_specialchars_decode($incomingfromhandler["type"]);

    $egmap_kml = wp_specialchars_decode($incomingfromhandler["kml"]);

    $egmap_other = wp_specialchars_decode($incomingfromhandler["other"]);

    $gmap_basics = file_get_contents("./wp-content/plugins/egmap/egmap_base.html", true);

    $gmap_basics = str_replace("[egmap_width]", $egmap_width, $gmap_basics);

    $gmap_basics = str_replace("[egmap_height]", $egmap_height, $gmap_basics);

    $gmap_basics = str_replace("[egmap_type]", $egmap_type, $gmap_basics);

    if(strlen($egmap_kml) > 1) {

    $kml_insert = 'var kmllayer = new google.maps.KmlLayer("';

    $kml_insert.= $egmap_kml;

    $kml_insert.= '"); kmllayer.setMap(map);';

    $gmap_basics = str_replace("[egmap_kml]", $kml_insert, $gmap_basics);

    } else {

    $gmap_basics = str_replace("[egmap_kml]", "", $gmap_basics);


    $egmap_return = $gmap_basics;

    return $egmap_return;



    Posted 9 years ago #
  2. EricPeterson

    Please help! I'm still quite frustrated and in need of ideas!

    I suspect that thematic is quite powerful, but it seems to require skills above my current level in order to implement most interesting plugins. I've now tried registering and enqueue-ing the google api to ensure it gets put in the header. I've also applied the basic jQuery fix of replacing the default word press version with the Google one.
    So far, no luck.

    Posted 9 years ago #
  3. kwight

    Hi Eric,
    I took a look with Firebug, to see if anything sticks out (I don't have any knowledge of the Maps API, so I'm no help there). There are definitely two sets of map controls being loaded, which means something is being loaded twice that shouldn't be... Perhaps you've done this, but I would disable everything else JS-wise (you seem to have NextGen and a bunch of jQuery plugins going), and see if you still get two sets of controls...

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.