Buying Need javascript programmer to help with this script

Discussion in 'Programming' started by Epod, Dec 21, 2012.

  1. #1
    Hi. I made a google maps script that needs to be pasted into my website. It works fine on its own, but once I paste it into the site it off-centers the table and doesnt show up. Please message me if you have a solution and how much you charge.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/wide.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Orange Lizards - Atlanta, GA</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <br />
    <table width="865" border="0" align="center" cellpadding="4" cellspacing="0">
      <tr>
        <td bgcolor="#FFFFFF"><img src="images/header_logo.png" width="865" height="156" /></td>
      </tr>
      <tr>
        <td bgcolor="#FF9900" style="padding-left: 20px;"><div align="center" class="whiteThirteenBold"><a href="index.html" class="white">HOME</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="our_contractors.html" class="white">OUR CONTRACTORS&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="contact_us.html" class="white">CONTACT US</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="wol1_concept.html" class="white">WHY ORANGE LIZARDS</a></div></td>
      </tr>
      <tr>
        <td width="629" valign="top" bgcolor="#FFFFFF" style="padding-left: 20px; padding-right: 20px; padding-top: 10px;"><!-- InstanceBeginEditable name="Body" -->
          <p class="splash2">Map Wide</p>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCmryDuU2lmu2kImnSi8UbrVog3ynxYC_k&sensor=false"></script> 
    
    <style type="text/css">
    
    html, body { height: 400px; width: 500px; } 
    
    </style>
    
    <script type="text/javascript"> 
    
    //<![CDATA[
    
    function initialize() {
    
      var myOptions = {
    
        zoom: 12,
    
        center: new google.maps.LatLng(33.805932,-84.340582),
    
        mapTypeControl: true,
    
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    
        navigationControl: true,
    
        mapTypeId: google.maps.MapTypeId.ROADMAP
    
      }
    
      var map = new google.maps.Map(document.getElementById("map_canvas"),
    
                                    myOptions);
    
     
    
      google.maps.event.addListener(map, 'click', function() {
    
            infowindow.close();
    
            });
    
      setMarkers(map, beaches);
    
    }
    
    var icons = new Array();
    
    icons["red"] = new google.maps.MarkerImage("http://orangelizards.com/images/mapicons/trim_logo.png",
    
          // This marker is 20 pixels wide by 34 pixels tall.
    
          new google.maps.Size(40, 40),
    
          // The origin for this image is 0,0.
    
          new google.maps.Point(0,0),
    
          // The anchor for this image is at 9,34.
    
          new google.maps.Point(9, 34));
    
    function getMarkerImage(iconColor) {
    
       if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
    
          iconColor = "red"; 
    
       }
    
       if (!icons[iconColor]) {
    
          icons[iconColor] = new google.maps.MarkerImage("http://orangelizards.com/images/mapicons/"+ iconColor +".png",
    
          // This marker is 40 pixels wide by 40 pixels tall.
    
          new google.maps.Size(40, 40),
    
          // The origin for this image is 0,0.
    
          new google.maps.Point(0,0),
    
          // The anchor for this image is at 6,20.
    
          new google.maps.Point(9, 34));
    
       } 
    
       return icons[iconColor];
    
    
    
    }
    
      // Marker sizes are expressed as a Size of X,Y
    
      // where the origin of the image (0,0) is located
    
      // in the top left of the image.
    
     
    
      // Origins, anchor positions and coordinates of the marker
    
      // increase in the X direction to the right and in
    
      // the Y direction down.
    
    
    
      var iconImage = new google.maps.MarkerImage('mapIcons/trim_logo.png',
    
          // This marker is 20 pixels wide by 34 pixels tall.
    
          new google.maps.Size(20, 34),
    
          // The origin for this image is 0,0.
    
          new google.maps.Point(0,0),
    
          // The anchor for this image is at 9,34.
    
          new google.maps.Point(9, 34));
    
      var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
    
          // The shadow image is larger in the horizontal dimension
    
          // while the position and offset are the same as for the main image.
    
          new google.maps.Size(37, 34),
    
          new google.maps.Point(0,0),
    
          new google.maps.Point(9, 34));
    
          // Shapes define the clickable region of the icon.
    
          // The type defines an HTML &lt;area&gt; element 'poly' which
    
          // traces out a polygon as a series of X,Y points. The final
    
          // coordinate closes the poly by connecting to the first
    
          // coordinate.
    
      var iconShape = {
    
          coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
    
          type: 'poly'
    
      };
    
    var infowindow = new google.maps.InfoWindow(
    
      { 
    
        size: new google.maps.Size(150,50)
    
      });
    
        
    
    function createMarker(map, latlng, label, html, color) {
    
        var contentString = '<b>'+label+'</b><br>'+html;
    
        var marker = new google.maps.Marker({
    
            position: latlng,
    
            map: map,
    
            shadow: iconShadow,
    
            icon: getMarkerImage(color),
    
            shape: iconShape,
    
            title: label,
    
            zIndex: Math.round(latlng.lat()*-100000)<<5
    
            });
    
    
    
        google.maps.event.addListener(marker, 'click', function() {
    
            infowindow.setContent(contentString); 
    
            infowindow.open(map,marker);
    
            });
    
    }
    
     
    
    /**
    
     * Data for the markers consisting of a name, a LatLng and a zIndex for
    
     * the order in which these markers should display on top of each
    
     * other.
    
     */
    
    var beaches = [
    
      ['Trim Logo', 33.806431,-84.338436, "trim_logo"],
    
      ['RPS Logo', 33.805932,-84.340582, "RPS_logo"],
    
      ['<a href="http://google.com>Test Test</a>', 33.805147,-84.338565, "rmi_logo"],
    
    ];
    
     
    
    function setMarkers(map, locations) {
    
      // Add markers to the map
    
     
    
      for (var i = 0; i < locations.length; i++) {
    
        var beach = locations[i];
    
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    
        var marker = createMarker(map,myLatLng,beach[0],beach[0],beach[3]);
    
      }
    
    }
    
    //]]>
    
    </script> 
    
    </head> 
    
    <body style="margin:0px; padding:0px;" onload="initialize()"> 
    
      <div id="map_canvas" style="width:100%; height:100%"></div> 
    
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    
    </script>
    
    <script type="text/javascript">
    
    _uacct = "UA-162157-1";
    
    urchinTracker();
    
    </script>
    
    </body> 
    
        <!-- InstanceEndEditable --></td>
      </tr>
      <tr bgcolor="#FF9900">
        <td><div align="center" class="bodyWhite">Copyright &copy; 2012 Orange Lizards Atlanta </div></td>
      </tr>
    </table>
    </body>
    <!-- InstanceEnd --></html>
    HTML:

    Thanks!
     
    Epod, Dec 21, 2012 IP
    TheForexGuy likes this.
  2. nickydev

    nickydev Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    Hi,

    I can do this task. please let me know your availability for skype chat.

    skype: niraj.singh9

    Thanks
     
    nickydev, Dec 21, 2012 IP