title: Javascript and the Google Maps API
body: <p>I'm in a spot of bother and my hairline is on the chopping block. When I integrated the maps API on this site, <a href="http://ritaknoetze.com/contact/" rel="nofollow">ritaknoetze.com</a>, everything worked perfectly.</p>
  
  <p>However, copying that exact code for a different demo website, <a href="http://scarabpaper.tinygiantstudios.co.uk/contact-us" rel="nofollow">scarabpaper</a>, the map doesn't show up at all? Could someone show me the ropes on what I'm doing wrong?</p>
  
  <p>Here's the code I got from Google itself that I modified for my WordPress theme/installation:</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
            function initialize() {
              var myLatlng = new google.maps.LatLng(-34.009839, 22.78101);
              var myOptions = {
                zoom: 9,
                center: myLatlng,
                navigationControl: true,
                mapTypeControl: false,
                scaleControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
              var image = '&lt;?php bloginfo('template_url')?&gt;/assets/googlemaps_marker.png';
              var myLatLng = new google.maps.LatLng(-34.009839, 22.78101);
              var beachMarker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                  icon: image
              });
            }
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>My HTML where the javascript goes:</strong></p>
  
  <pre><code>&lt;div class="contact_container"&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;div class="clearfloat"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS for the affected divs</strong></p>
  
  <pre><code>#map_canvas {
      width: 880px;
      height: 300px;
      margin-left: 10px;
      margin-bottom: 30px;
      margin-top: 10px;
      float: left;
      border: 1px solid #dedcdc;}
  
  .contact_container {    /*container for ALL the contact info*/
      background-color: #fff;
      border: 1px solid #dedcdc;
      width: 900px;
      margin-top: 30px;
      padding: 20px;
      padding-bottom: 0;}
  </code></pre>
  
  <p>Any Help would be <em>greatly</em> appreciated...</p>