Google Maps API and blogspot

Hi,

I am working on a site on blogspot and want to add a map and some custom markers.

Adding the maps and the markers is quite simple but then I realised that I would save alot of time and code if I would create a function to add the markers to the map instead of writing the code for each marker.

But for some reason it doesn't work.

Here is the code that I am using.

Adding the map and calling the marker

<script type="text/javascript">
 function initialize() {
      var latlng = new google.maps.LatLng(50.961093,6.9758);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  mapIcon("50.958142,6.974137","toilet",map);
 
    }
initialize();

</script>

Code (markup):

The function to add the marker

<script type="text/javascript">
function mapIcon(coord,icon,mapobj) {

   var icons= new Array();
   icons["tram"] = "tram.png";
   icons["toilet"] = "toilets.png";
   icons["cablecar"] = "cablecar.png";

   var image = 'http://google-maps-icons.googlecode.com/files/'+icons[icon];
   var myLatLng = new google.maps.LatLng(coord);
   var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: mapobj,
      icon: image
   });

}
</script>

Code (markup):

The map still loads but the marker does not show up. Any idea why?

 

Your coordinates are passed as a string but LatLng requires numbers. Try this instead:

<script type="text/javascript">
function mapIcon(lat,lng,icon,mapobj) {
	var icons= new Array();
	icons["tram"] = "tram.png";
	icons["toilet"] = "toilets.png";
	icons["cablecar"] = "cablecar.png";
	var image = 'http://google-maps-icons.googlecode.com/files/'+icons[icon];
	var myLatLng = new google.maps.LatLng(lat,lng);
	var beachMarker = new google.maps.Marker({
		position: myLatLng,
		map: mapobj,
		icon: image
	});
}

function initialize() {
	var latlng = new google.maps.LatLng(50.961093,6.9758);
	var myOptions = {
		zoom: 16,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	mapIcon(50.958142,6.974137,"toilet",map);
}

initialize();
</script>

Code (markup):

 

doh why didn't I see that lol

thanks for the help.