SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transplant Not Successfull

    I'm trying to put google maps into my website www.parkingrebel.com but with limited success.

    I can successfully place a google map here but not here!!??

    Here is the offending pages code
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Free Parking York Garden Street</title>
    <link rel="stylesheet" type="text/css" href="rebel_css.css"/>
    <script type="text/javascript" src="rebel_javascript.js">
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAg9BG2gV6LTc5ib2_7NjBThR5T3TFjFAuKZItju8ZVq2U2A3wVRQ-4WZPEjCq0DbBKBEiyj-hmA3wbQ"
          type="text/javascript">
    	  	  </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <img src="images_rebel/banner_graffiti_1.jpg" width="100&#37;" class="bansky" alt="Artist: Bansky Wall and Piece ISBN 1844137864. Buy it from Borders, its awesome!" > 
    <h1>parkingrebel.com&trade;</h1>
    <div id="newsTicker"> 
      <div id="newsScroller"><strong>History:</strong> Logged by parkingrebel.com&trade; 
        in Winter 2007. At the back of Yorks other University next to Kaleidoscope 
        day nursery lies an oasis of parking tariff exemption. The unremarkable patch 
        of rubble next to the nursery will comfortably fit up to 4 car spaces unless 
        of course some daft Yank parks his humvee then your buggered.</div>
    </div>
    	<img src="images_rebel/garden_street.jpg" alt="York Free Parking Gargen Street" class="spotted"> 
    <p class="text_spotted">Road: Garden Street (Back of Ripon & York St John Uni)<br>
    	Walking time to city centre shops: 3 minutes<br>
    	AA Street by Street page number and grid reference: p3 G1<br>
    	Number of parking bays: 4<br>
    	Nearest shop: Spa<br>
    	Nearest pub: The Reindeer
    	</p>
    		<a href="rebel_index.html">Home</a>
    <div id="map" style="width:400px;height:200px"></div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-1022282-1";
    urchinTracker();
    </script>
    </body>
    </html>
    Here is the offenders external javascript code
    HTML Code:
    // JavaScript Document
    addLoadListener(initNewsTicker);
    
    function initNewsTicker()
    {
      var newsScroller = document.getElementById("newsScroller");
    
      newsScroller.style.left = 0;
    
      if (retrieveComputedStyle(newsScroller, "position") == "relative")
      {
        var relativeWidth = newsScroller.offsetWidth;
    
        newsScroller.style.position = "absolute";
        newsScroller.calculatedWidth = newsScroller.offsetWidth;
    
        if (relativeWidth > newsScroller.calculatedWidth)
        {
          newsScroller.calculatedWidth = relativeWidth;
        }
    
        newsScroller.style.position = "relative";
      }
      else
      {
        newsScroller.calculatedWidth = newsScroller.clientWidth;
      }
    
      var stopLink = document.createElement("a");
      stopLink.setAttribute("id", "");
      stopLink.id = "stopLink";
      stopLink.setAttribute("href", "");
      stopLink.href = "#";
      stopLink.appendChild(document.createTextNode("Stop/start news ticker"));
      attachEventListener(stopLink, "click", clickStopLink, false);
    
      var stopButton = document.createElement("div");
    
      stopButton.appendChild(stopLink);
    
      var newsTicker = document.getElementById("newsTicker");
    
      if (newsTicker.nextSibling != null)
      {
        newsTicker.parentNode.insertBefore(stopButton, newsTicker.nextSibling);
      }
      else
      {
        newsTicker.parentNode.appendChild(stopButton);
      }
    
      moveNewsScroller();
    
      return true;
    }
    
    function moveNewsScroller()
    {
      var increment = 3;
      var newsScroller = document.getElementById("newsScroller");
      var currLeft = parseInt(newsScroller.style.left);
    
      if (currLeft < newsScroller.calculatedWidth * -1)
      {
        newsScroller.style.left = newsScroller.parentNode.offsetWidth + "px";
      }
      else
      {
        newsScroller.style.left = (parseInt(newsScroller.style.left) - increment) + "px";
      }
    
      newsScroller.timeout = setTimeout("moveNewsScroller()", 50);
    
      return true;
    }
    
    function clickStopLink()
    {
      var stopLink = document.getElementById("stopLink");
    
      if (typeof stopLink.stopped != "undefined" && stopLink.stopped)
      {
        moveNewsScroller();
        stopLink.stopped = false;
      }
      else
      {
        clearTimeout(document.getElementById("newsScroller").timeout);
        stopLink.stopped = true;
      }
    
      return true;
    }
    
    function addLoadListener(fn)
    {
      if (typeof window.addEventListener != 'undefined')
      {
        window.addEventListener('load', fn, false);
      }
      else if (typeof document.addEventListener != 'undefined')
      {
        document.addEventListener('load', fn, false);
      }
      else if (typeof window.attachEvent != 'undefined')
      {
        window.attachEvent('onload', fn);
      }
      else
      {
        var oldfn = window.onload;
        if (typeof window.onload != 'function')
        {
          window.onload = fn;
        }
        else
        {
          window.onload = function()
          {
            oldfn();
            fn();
          };
        }
      }
    }
    
    function attachEventListener(target, eventType, functionRef, capture)
    {
      if (typeof target.addEventListener != "undefined")
      {
          target.addEventListener(eventType, functionRef, capture);
      }
      else if (typeof target.attachEvent != "undefined")
      {
          target.attachEvent("on" + eventType, functionRef);
      }
      else
      {
        eventType = "on" + eventType;
    
        if (typeof target[eventType] == "function")
        {
          var oldListener = target[eventType];
    
          target[eventType] = function()
          {
            oldListener();
    
            return functionRef();
          }
        }
        else
        {
          target[eventType] = functionRef;
        }
      }
    
      return true;
    }
    
    function retrieveComputedStyle(element, styleProperty)
    {
      var computedStyle = null;
    
      if (typeof element.currentStyle != "undefined")
      {
        computedStyle = element.currentStyle;
      }
      else
      {
        computedStyle = document.defaultView.getComputedStyle(element, null);
      }
    
      return computedStyle[styleProperty];
    }
    //<![CDATA[
    // Google Map Maker script v.1.1
    // (c) 2006 Richard Stephenson http://www.donkeymagic.co.uk
    // Email: donkeymagic@gmail.com
    // http://mapmaker.donkeymagic.co.uk
    var map;
    var icon0;
    var newpoints = new Array();
     
    function addLoadEvent(func) { 
    	var oldonload = window.onload; 
    	if (typeof window.onload != 'function'){ 
    		window.onload = func
    	} else { 
    		window.onload = function() {
    			oldonload();
    			func();
    		}
    	}
    }
     
    addLoadEvent(loadMap);
    addLoadEvent(addPoints);
     
    function loadMap() {
    	map = new GMap2(document.getElementById("map"));
    	map.addControl(new GLargeMapControl());
    	map.addControl(new GMapTypeControl());
    	map.setCenter(new GLatLng( 53.96578102161267, -1.0777759552001953), 16);
    	map.setMapType(G_MAP_TYPE);
     
    	icon0 = new GIcon();
    	icon0.image = "http://www.google.com/mapfiles/marker.png";
    	icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
    	icon0.iconSize = new GSize(20, 34);
    	icon0.shadowSize = new GSize(37, 34);
    	icon0.iconAnchor = new GPoint(9, 34);
    	icon0.infoWindowAnchor = new GPoint(9, 2);
    	icon0.infoShadowAnchor = new GPoint(18, 25);
    }
     
    function addPoints() {
     
    	newpoints[0] = new Array(53.96547807166233, -1.0782480239868164, icon0, 'Free Parking Garden Street', 'Free Parking'); 
     
    	for(var i = 0; i < newpoints.length; i++) {
    		var point = new GPoint(newpoints[i][1],newpoints[i][0]);
    		var popuphtml = newpoints[i][4] ;
    		var marker = createMarker(point,newpoints[i][2],popuphtml);
    		map.addOverlay(marker);
    	}
    }
     
    function createMarker(point, icon, popuphtml) {
    	var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
    	var marker = new GMarker(point, icon);
    	GEvent.addListener(marker, "click", function() {
    		marker.openInfoWindowHtml(popuphtml);
    	});
    	return marker;
    }
    //]]>
    Here is the offenders external CSS code
    HTML Code:
    /* CSS Document */
    h3 {
    font-size: 133%; 
    margin-left: 3%; 
    padding: 0;
    border-bottom: 0px solid yellow;}
    h1 {font-size: 200%; text transform: lowercase; letter-spacing: 3px;
    margin: 0.66em -1em 0.33em 3%; padding: 0; border-bottom: 7px solid rgb(255%,0%,0%); border-top: 7px solid rgb(255%,0%,0%); clear: both;}
    body {font: 11px Veranda , Arial, Helvetica, sans-serif;
    margin: 0; padding: 0;
    background: rgb(95%,95%,80%); color: black;}
    #newsTicker
    {
      position: relative;
      width: 80%;
      height: 35px;
      overflow: hidden;
      background-image:  url();
      background-repeat: no-repeat;
      margin: 0.66em 0 0.33em 3%;
    }
    
    #newsScroller
    {
      position: absolute;
      position/**/: relative;
      height: 35px;
      line-height: 35px;
      white-space: nowrap;
      color: black;
      font-size: 95%;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    #stopLink
    {
      position: absolute;
      width: 35px;
      height: 35px;
      margin-left: 80%;
      margin-top: -35px;
      background-image:  url(images_rebel/stop.jpg);
      background-repeat: no-repeat;
      text-indent: -9999px;
      text-decoration: none;
    }
    .bansky{
    float: left;
    margin: 0em 0 -1em 3%;
    padding_bottom: 0px;
    }
    .bansky_main {
    float: left;
    margin: 0em -1.5em -1em 3%;
    padding_bottom: 0px;
    }
    .end {
    clear: both;
    margin-left: 30px;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%; 
    height: 2px;
    padding: 0;
    color:FF0000;
    }
    .spotted {
    float: left;
    margin-right: 2%;
    margin-left: 3%;
    padding-right: 20px;
    padding-bottom: -20px;
    }
    .text_spotted {
    line-height: 1.6em;
    margin-left: 5px;
    background-color: #FFAA00;
    margin-top: 1em;
    }
    a.:link {color: #000000; text-decoration: none}
    a.:visited {color: #000000; text-decoration: none}
    a.:hover {text-decoration: underline overline; background: ;}
    a {margin-left: 3%;}
    .menuheader {
    text-decoration: none;
    }
    .loo {
    position: absolute;
    top: 30%;
    left: 73%;
    padding: 0;
    margin: 0;
    }
    
    .winner
    {
    margin-left: 2.5em;
    font-size: 1em;
    background-image: url();
    border-top: 2px dashed orange;
    border-bottom: 4px solid orange;
    margin-right: 35em;
    background-color: yellow;
    font-weight: bold;
    }
    .copyright
    {
    font-weight: bold;
    color: #AAAAAA;
    margin-left: 5%;
    padding: 0;
    margin-top: -2em;
    }
    .warden {
    float: right;
    border: 5px green ;
    padding: 5px;
    margin: 5px;
    .warden a:link, .warden a:visited {
    text-decoration: none;
    }
    
    .warden a:hover, .warden a:active {
    text-decoration: none;
    }
    div#popup {
    background:#EFEFEF;
    border:1px solid #999999;
    margin:0px;
    padding:7px;
    width:270px;
    }
    Now I have a hunch the problem is originating from the javascript. But Ive played around with all the options I could muster. Then I thougth something might be wrong with the css, maybe external & imbedded CSS are competing with each other - the old hereditary thing. I'm clutching at straws but if anyone can pull me out of this mess you earn your self a halo :-)

    Any insights welcome...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firebug says your error is on line 201 of rebel_javascript.js:

    map = new GMap2(document.getElementById("map"));

    "GMap2 is not defined"

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firebug

    Quote Originally Posted by jtrelfa View Post
    Firebug says your error is on line 201 of rebel_javascript.js:

    map = new GMap2(document.getElementById("map"));

    "GMap2 is not defined"
    Thank you for your reply. I have now fixed the problem. I've now downloaded the firebug and instructed it to check the javascript but how does it tell me -" Firebug says your error is on line 201 of rebel_javascript.js:" I cant get it to do this. I can see firebug is damn usefull but I cant get it to replicate the error message in line 201. Please could you talk me through the steps you took in firebug to pinpoint the error :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All I did was visit the link you sent (with firebug enabled). There was a red circle with a white X in the bottom right side of firefox. I clicked it and the firebug console came up showing where the error was.

    I'm not sure how else to explain it - everything happens in the firebug console that you bring up by use tools...firebug...open firebug or just clicking on the little icon in the bottom right.

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jtrelfa View Post
    All I did was visit the link you sent (with firebug enabled). There was a red circle with a white X in the bottom right side of firefox. I clicked it and the firebug console came up showing where the error was.

    I'm not sure how else to explain it - everything happens in the firebug console that you bring up by use tools...firebug...open firebug or just clicking on the little icon in the bottom right.

    Thank you, yes I see what you mean. A very clever bit of kit
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jtrelfa View Post
    Firebug says your error is on line 201 of rebel_javascript.js:

    map = new GMap2(document.getElementById("map"));

    "GMap2 is not defined"
    Thank you
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •