Google Maps API 3 and general Syntax

[amandaNHT]

Ok, so I have experience in server-side scripting, and my boss wants me to do something that requires client-side scripting...

I'm trying to make a map for our website using the Google Maps API 3 code but my Javascript experience is very limited... I got a textbook and I'm getting the basics more or less down, but I can't error-check myself. I'm not sure what I'm doing wrong. I get the map, but no markers...

Here is an example of my code:

plats76 = (
	new google.maps.Size(132,94), // Size (h, w) of the image
	new google.maps.Point(66,47) // Where the dot location is for the image
	icon: 'img/LocustGroveLogo_home.png', // What the new image is
	null,
);

unplats76 = (
	new google.maps.Size(20,25), // Size (h, w) of the image
	new google.maps.Point(9,23) // Where the dot location is for the image
	icon:'img/nhtMarker.png',
	shadow:'img/nhtMarkerShadow.png',
);

var my76Marker = new google.maps.Marker({
	position: new google.maps.LatLng(47.909605,-122.219309), // Google Maps Location for the NHT Office (example)
	new google.maps.Size(20,25), // Size (h, w) of the image
	new google.maps.Point(9,23) // Where the dot location is for the image
	icon:'img/nhtMarker.png',
	shadow:'img/nhtMarkerShadow.png',
	map: map
});

google.maps.event.addListener(my76Marker, 'mouseout', function(){
	this.setIcon(unplats76);
});
google.maps.event.addListener(my76Marker, 'mouseover', function(){
	this.setIcon(plats76);
});

and...

	window.onload = function() {
		var mapDiv = document.getElementById('map');
		var latlng = new google.maps.LatLng(47.909605,-122.219309);
		var options = {
			center: latlng,
			zoom: 19,
			mapTypeId: google.maps.MapTypeId.SATELLITE
		};
		var map = new google.maps.Map(mapDiv, options);
	}

I'm using PHP to generate the coordinates and numbers, like the 76 in this example, but this is what the client-side shows up as once the PHP is all done and lovely.

Anyway... I need to get the markers to show up and then get the markers to change on mouseover. If someone could take a look at what I've got and help me figure out how to fix it, it'd be greatly appreciated.

Thanks!

[xelawho]

easier to debug a live map, but for starters I can see that you have problems with your commas in this code:

plats76 = (
	new google.maps.Size(132,94), // Size (h, w) of the image
	new google.maps.Point(66,47) // Where the dot location is for the image
	icon: 'img/LocustGroveLogo_home.png', // What the new image is
	null,
);

unplats76 = (
	new google.maps.Size(20,25), // Size (h, w) of the image
	new google.maps.Point(9,23) // Where the dot location is for the image
	icon:'img/nhtMarker.png',
	shadow:'img/nhtMarkerShadow.png',
);

the way I understand it, each attribute of an object needs a comma after it, to tell the code that there is more to come. Following from that, the LAST attribute should have no comma - if it does some browsers (particularly IE) expect more to come and freak out when there is nothing.

I also suspect that you should be wrapping your objects in curly brackets, so the code I would be going for instread of the above would be something like:

plats76 = ({
	new google.maps.Size(132,94), // Size (h, w) of the image
	new google.maps.Point(66,47), // Where the dot location is for the image
	icon: 'img/LocustGroveLogo_home.png', // What the new image is
	null
});

unplats76 = ({
	new google.maps.Size(20,25), // Size (h, w) of the image
	new google.maps.Point(9,23), // Where the dot location is for the image
	icon:'img/nhtMarker.png',
	shadow:'img/nhtMarkerShadow.png'
});

that might be a start, anyway - what does firebug say?