Javascript and the Google Maps API

Posted by Tiny Giant Studios on Stack Overflow See other posts from Stack Overflow or by Tiny Giant Studios
Published on 2011-02-09T23:22:43Z Indexed on 2011/02/09 23:26 UTC
Read the original article Hit count: 283

Filed under:
|
|
|
|

Hiya coding Ninja's

I'm in a spot of bother and my hairline is on the chopping block. When I integrated the maps API on this site, ritaknoetze.com, everything worked perfectly.

However, copying that exact code for a different demo website, scarabpaper, the map doesn't show up at all? Could someone show me the ropes on what I'm doing wrong?

Here's the code I got from Google itself that I modified for my WordPress theme/installation:

JavaScript:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
          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 = '<?php bloginfo('template_url')?>/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
            });
          }
        </script>

My HTML where the javascript goes:

<div class="contact_container">
    <div id="map_canvas"></div>
    <div class="clearfloat"></div>
</div>

My CSS for the affected divs

#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;}

Any Help would be greatly appreciated...

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html