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: http://www.non-parametric.com/wp-testing/?page_id=16
What can I do to fix this other than giving up on thematic and switching to twentyten?
Thanks!
CODE
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
ACCESSORY .HTML FILE:
<!DOCTYPE html>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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);
[egmap_kml]
}
</script>
<div id="egmap" style="width: [egmap_width]px; height: [egmap_height]px; border: 4px double black;">
</div>
<script type="text/JavaScript">
window.onload = egmap_init();
</script>
PLUGIN .PHP FILE CODE:
//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) {
$incomingfrompost=shortcode_atts(array(
'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;
}
?>
