Solved

Google Maps in Wordpress CSS Configuration

Posted on 2013-01-13
8
308 Views
Last Modified: 2013-02-12
I have setup to sites to use a Google Map Wordpress plugin.  It works with this Web Site but not with this test Web Site.

In Firefox, on the non-working site I can see the Map Table it<table id="map_table" width="100%" cellspacing="0px" cellpadding="0px"> is where the map should populate.  What CSS configuration should I look at that is keeping this from loading the map image? Everthing else in the plug-in works fine.
0
Comment
Question by:danfiggolf
[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
  • 4
8 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 38773017
Go through the plugin files until you see it echoing that table tag.
0
 

Author Comment

by:danfiggolf
ID: 38773070
Here is the code that opens and closes the table:

            // Start the map table
            //
            $content =  
                '<table id="map_table" width="100%" cellspacing="0px" cellpadding="0px">' .
                '<tbody id="map_table_body">' .
                '<tr id="map_table_row">'.
                '<td id="map_table_cell" width="100%" valign="top">'
                ;

            // If starting image is set, create the overlay div.
            //
            $startingImage=get_option('sl_starting_image','');
            if ($startingImage != '') {
                $startingImage =
                    ((preg_match('/^http/',$startingImage) <= 0) ?SLPLUS_PLUGINURL:'').
                    $startingImage
                    ;

                $content .=
                    '<div id="map_box_image" ' .
                        'style="'.
                            "width:". $slplus_plugin->data['sl_map_width'].
                                      $slplus_plugin->data['sl_map_width_units'] .
                                      ';'.
                            "height:".$slplus_plugin->data['sl_map_height'].
                                      $slplus_plugin->data['sl_map_height_units'].
                                      ';'.
                        '"'.
                    '>'.
                    "<img src='$startingImage'>".
                    '</div>' .
                    '<div id="map_box_map">'
                    ;
            }
            
            // The Map Div
            //
            $content .=
                '<div id="map" ' .
                    'style="'.
                        "width:". $slplus_plugin->data['sl_map_width'].
                                  $slplus_plugin->data['sl_map_width_units'] .
                                  ';'.
                        "height:".$slplus_plugin->data['sl_map_height'].
                                  $slplus_plugin->data['sl_map_height_units'].
                                  ';'.
                    '"'.
                '>'.
                '</div>'
                ;

            // Credits Line
            if (!(get_option('sl_remove_credits',0)==1)) {
                $content .=
                    '<div id="slp_tagline" ' .
                        'style="'.
                            "width:". $slplus_plugin->data['sl_map_width'].
                                      $slplus_plugin->data['sl_map_width_units'] .
                                      ';'.
                        '"'.
                    '>'.
                    __('search provided by', 'csl-slplus') .
                    "<a href='". $slplus_plugin->url."' target='_blank'>".
                         $slplus_plugin->name.
                    "</a>".
                    '</div>'
                    ;
            }

            // If starting image is set, close the overlay div.
            //
            if ($startingImage != '') {
                $content .= '</div>';
            }
            
            // Close the table

Open in new window


And then the content is rendered, but I don't understand why it renders for my test3 site and not my test2 site - what is preventing the content from displaying?

            $content .= '</td></tr></tbody></table>';

            // Render
            //
            echo apply_filters('slp_map_html',$content);

Open in new window

0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 38773093
Same physical server just different subdomains?  Because

<tr id="map_table_row"> and
<td id="map_table_cell" width="100%" valign="top">

aren't rendering at all.  I'd almost want to say ISP is stripping out the map as an XSS attack but that would be the case on both sites if they are on the same box.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:danfiggolf
ID: 38773171
Same physical system - just a separate Wordpress install with a generic theme.  Very strange that its stripping out the table for I'm not doing anything to do this
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 38773175
Does Google Maps need an API key to function? It's been a long time since I worked with it...
0
 

Author Comment

by:danfiggolf
ID: 38773224
Yes - fortunately the Wordpress plugin guides you through the API process
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 38773244
Are you using the same API key on both subdomains?
0
 

Author Comment

by:danfiggolf
ID: 38773320
The problem was with the map height set at 100%.  After switching it to height = 480px.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

740 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