BLOG:CMS :: Support Forum

Support Forum for BLOG:CMS

You are not logged in.

  • Index
  •  » Plugins
  •  » Google Maps & Internet Explorer fiasco

#1 10.12.2006 07:38

abdon
BLOG:CMS Junior
Registered: 21.11.2006
Posts: 13

Google Maps & Internet Explorer fiasco

Oh this hurts so much...

I have been working for quite a while now on using BlogCMS for a project. I created several custom tables on the database, plugins to pull from the tables, format the data, and create google maps with overlays. Everything was working like a dream, until I decided to take a look at the page through the eyes of Internet Exploder. Lo and behold, IE chokes on the whole thing and dies :'O

This is the problem: Firefox and just about everybody else in the planet tolerates  Javascript within tables, div, span, and other containers although it's technically illegal. IE begins to render the page, then complaints that "Internet Exploder cannot open the internet site http://yoursite.com. Operation aborted" before dying a horrible death. If you try to put a google map on a blog entry, it won't work because it is nested deep inside of <div>'s tags.

In order to work the JavaScript chunk must be either at the top on the <head>, or at the bottom, right before the </body> tag. I'm trying to place it at the bottom, so what i need is to be able to find out what item is being displayed and I can then pull the respective record out of the database.

Question; from a plugin that is being called from ExtraSkins -> Footer, how do I pull the item data? On my working plugin, the one that edit records before they are posted to the browser, the following pulls the array:

function getEventList() { return array('PreItem'); }
  function event_PreItem(&$data) {
... // Hello world?
}

But this is being called from skins -> Default -> Item pages. When I try to do something similar from ExtraSkin -< footer, it doesn't pull the array :'(

Please PLEASE please somebody throw me a bone here. How do I get a plugin  being called from the bottom to give me the Item data?

Offline

 

#2 10.12.2006 21:55

Radek Hulán
Site Admin
From: Prague, Czech Republic
Registered: 17.03.2004
Posts: 2509
Website

Re: Google Maps & Internet Explorer fiasco

Hi, event_PreItem is an event, which has nothing to do with skins. Events do not get called from skins, they are called by BLOG:CMS parser, when needed, in this case, when anything requests to display an item. But skin itself is not aware there are plugins possibly modifying its content before actual display.

If you want to  specifically call plugin from-within a skin, use SkinVar() function in plugin. You may also use conditional calls for this plugin, like <%if(skintype,item)%> .. <%MyPlugin%> <%endif%>.

Anyway, I have several sites with JavaScript between <body> .. </body> tags, and they work fine in MSIE as well. This is definitely supported. Try to debug your JavaScript, MSIE now offeres Web Developer Toolbar as well.


--= BLOG:CMS developer =--

Offline

 

#3 14.12.2006 02:51

abdon
BLOG:CMS Junior
Registered: 21.11.2006
Posts: 13

Re: Google Maps & Internet Explorer fiasco

Radek Hulán wrote:

Hi, event_PreItem is an event, which has nothing to do with skins. Events do not get called from skins, they are called by BLOG:CMS parser, when needed, in this case, when anything requests to display an item. But skin itself is not aware there are plugins possibly modifying its content before actual display.

If you want to  specifically call plugin from-within a skin, use SkinVar() function in plugin. You may also use conditional calls for this plugin, like <%if(skintype,item)%> .. <%MyPlugin%> <%endif%>.

Anyway, I have several sites with JavaScript between <body> .. </body> tags, and they work fine in MSIE as well. This is definitely supported. Try to debug your JavaScript, MSIE now offeres Web Developer Toolbar as well.

The problem is not JavaScript, but JavaScript attempting to render a dynamic chunk to the page. The problem is well documented here:

http://mapki.com/index.php?title=FAQs#Browser_Problems

To make it work on BlogCMS, I added the following generic code to the <head> portion:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YourOwnKeyHere"
      type="text/javascript"></script>

followed by the map placeholder on the item itself:

<div id="map" style="width: 525px; height: 300px">
  <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

And a plugin on extraskin -> footer right before the </body> tag, that pulls the stuff out of the database, and prints it to the blog:

function doSkinVar($skinType) {

  // Gets the Geolocation for the main google map
  //  The first 100 entries correlates to my map table
  // That way I can use the generic PHP $_GET variable to pull the
  // item title passed by the URL request.

  if ($_GET['item'] >= 1 && $_GET['item'] <=100) {
    $query = sql_query("SELECT * FROM `100` WHERE MountainID=$_GET[item]");
    while ($queryOut = sql_fetch_array($query)) {       
      $GoogleGeo =  $queryOut[CoordinateDD];
    }

    // marker points are on a different table
    $query = sql_query("SELECT * FROM `100MapPlots` WHERE MountainID=$_GET[item]");
    while ($queryOut = sql_fetch_array($query)) {  // maybe 1, maybe a bunch, maybe 0...
      $plots = "
      var point = new GLatLng($msg[GeoLoc]);
      var marker = createMarker($queryOut[MarkerType],'$queryOut[Entry]')
      map.addOverlay(marker);
    ";
    }

  $string .= <<< EndOfText

  <BR>
    <script type="text/javascript">
    //<![CDATA[
   
    if (GBrowserIsCompatible()) {
   
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

      // Display the map, with some controls and set the initial location
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      GEvent.addListener(map, "moveend", function() {
        var center = map.getCenter();
        document.getElementById("message").innerHTML = center.toString();
       });
           <!-- the main window and zoom level -->
       map.setCenter(new GLatLng($GoogleGeo),12);
   
$plots;

    }
   
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
    </script>
   
EndOfText;

                 echo $string;
  }

} // End of doSkinVar

} // End of Class

The first chunk on the <head> is generic enough; it determines the map size.

The second chunk on the item body is also generic enough; the size should match the size on the top chunk.

The third chunk of javascript is what renders the map. This is what needs to be customized if you have more than one map on your pages. Because you cannot write this to the item, it is best handled by a plugin.

Offline

 
  • Index
  •  » Plugins
  •  » Google Maps & Internet Explorer fiasco

Board footer

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson

TOPlist