Javascript and the Google Maps API
- by Tiny Giant Studios
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...
