Hi all,

I am clearly a Javascript beginner. However, I am asked to upgrade a hotels engine (http://www.voyage-net.com/bons-plans/hotel.php yes, it's in French).
I have to display a google Map (via the JS API V3 : http://code.google.com/intl/fr/apis/...on/javascript/) showing hotels markers for each result.

I guess many difficulties are waiting for me. The first one is that I cannnot display any map at all. I think it has something to do with the Ajax used to retrieve results.

I have read some tutorials and tryied to use anonymous function to load the map, but it doesn't work.

Here is what looks like the code :

Code:
// We are at the end of the php file which is requested via AJAX to extract hotels results

(function(){
function initialize_map() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("hotels_map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '300px';
}
var geocoder;
var map;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {zoom: 1, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}
var address = '<?php echo $adresse[1]; ?>';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myOptions.center = results[0].geometry.location;
myOptions.zoom = 14;
map = new google.maps.Map(document.getElementById("hotels_map"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} 
});
}
window.onload = initialize_map;
})();
</script>
<div id="plan_hotels" style="width:100% ; height:200px ; border:1px black solid">
</div>
In a perfect world, I would prefer to modify this portion code only to achieve my goal, without modifying the rest.
What would you recommand to do ?

Thank you for your help