Login

11-05-2008, 12:16 PM

[eluser]hackersapien[/eluser]
Hi, I'm developing an application that includes OpenLayers and JQuery, i've downloaded the openlayers code and i have a page with the following javascript code and html:

Code:
[removed]

        var map;

        $(document).ready(function() {

            map = new OpenLayers.Map('map');

            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var gphy = new OpenLayers.Layer.Google(

                "Google Physical",

                {type: G_PHYSICAL_MAP}

            );

            var gmap = new OpenLayers.Layer.Google(

                "Google Streets" // the default

            );

            var ghyb = new OpenLayers.Layer.Google(

                "Google Hybrid",

                {type: G_HYBRID_MAP}

            );

            var gsat = new OpenLayers.Layer.Google(

                "Google Satellite",

                {type: G_SATELLITE_MAP}

            );

            map.addLayers([gphy, gmap, ghyb, gsat]);

            map.setCenter(new OpenLayers.LonLat(10.2, 48.9), 5);

        });

    [removed]

    <h1 id="title">Google Layer Example</h1>

    <div id="tags"></div>

    <p id="shortdesc">

        Demonstrate use of the various types of Google layers.

    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs">

        For best performance, you must be using a version of the Google Maps

        API which is v2.93 or higher. In order to use this version of the API,

        it is best to simply set your application to use the string "v=2" in

        the request, rather than tying your application to an explicit version.

    </div>

In my header file I have the following in my <head></head> section:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html &gt;

&lt;head&gt;

&lt;link rel="stylesheet" type="text/css" href="&lt;?=base_url();?&gt;css/datePicker.css" media="all"&gt; 

&lt;link rel="stylesheet" type="text/css" href="&lt;?=base_url();?&gt;css/template.css" media="all"&gt; 

&lt;!--[if IE]>[removed][removed]<![endif]--&gt;

[removed][removed]

[removed][removed]

[removed][removed]

[removed][removed]

[removed][removed]

[removed][removed]

[removed]

$(function()

{

    $('.date-pick').datePicker({startDate:'01/01/1965'});

});

$(document).ready(function(){

        $('.delete').click(function(){

            var answer = confirm('Delete this record '+jQuery(this).attr('id'));

                        // jQuery(this).attr('title') gets anchor title attribute

            return answer; // answer is a boolean

            });

    }); 

[removed]

&lt;title&gt;Bee Hive:: &lt;?=$page_title?&gt;&lt;/title&gt;

&lt;/head&gt;

Weird thing is the map isn't loading, no errors on firebug, if I paste the same code into a non CI app it works, any idea what's going wrong?

11-06-2008, 05:30 PM

[eluser]crumpet[/eluser]
are you including the openLayers.js file ?

11-06-2008, 05:31 PM

[eluser]hackersapien[/eluser]
I fixed it, seems it was a CSS problem that was hiding the map :-)

11-06-2008, 05:37 PM

[eluser]crumpet[/eluser]
all the filtration of the javascript tags makes it really difficult to see what problems there actually are!