var MYMAP = {
  bounds: null,
  map: null
};
MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();
};
MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(xml){
    $(xml).find("marker").each(function(){
      var name = $(this).find('name').text();
      var address = $(this).find('address').text();
      // create a new LatLng point for the marker
      var lat = $(this).find('lat').text();
      var lng = $(this).find('lng').text();
      var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
      // extend the bounds to include the new point
      MYMAP.bounds.extend(point);
      // add the marker itself
      var marker = new google.maps.Marker({
        position: point,
        map: MYMAP.map
      });
      // create the tooltip and its text
      var infoWindow = new google.maps.InfoWindow();
      var html='<b>'+name+'</b><br />'+address;
      // add a listener to open the tooltip when a user clicks on one of the markers
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(MYMAP.map, marker);
      });
    });
    // Fit the map around the markers we added:
    MYMAP.map.fitBounds(MYMAP.bounds);
	  zoomChangeBoundsListener =
	      google.maps.event.addListener(MYMAP.map, 'bounds_changed', function(event) {
	          if (this.getZoom()){
	              this.setZoom(13);
	          }
	      google.maps.event.removeListener(zoomChangeBoundsListener);
	  });
  });
};


function loadMap() {
//  $("#map").css({
//    height: 500,
//    width: 600
//  });

	var myLatLng = new google.maps.LatLng(46.387363,16.480223);
    MYMAP.init('#map', myLatLng, 13);
    MYMAP.placeMarkers('js/mymap.xml');
}