var MY_MAPTYPE_ID = 'hiphop';
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var map = null;
var i = 0;
var lastlinkid;
function initialize() {
var stylez = [
{
featureType: "all", elementType: "all", stylers: [{ hue: "#08ff00" }, { saturation: -100 },{lightness:10} ] } ]; 

// create the map
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(50.868811,4.375305),
mapTypeControl: false,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: false,
mapTypeControl: false,
disableDefaultUI: true,

mapTypeId: MY_MAPTYPE_ID
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var styledMapOptions = {
name: "Aquila"
};
var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up markers with info windows
// add the points
var point = new google.maps.LatLng(50.910299,4.42602);
var marker = createMarker(point,"Carrosserie Karreveld <br> Nieuwbrugstraat 77 1830 Machelen","+32 (0)2 726 00 60","<div style=width:200px;height:80px;font-family:Georgia; font-size:14px;color:#666;font-style:italic;>Carrosserie Karreveld <br> Nieuwbrugstraat 77 <br>1830 Machelen <br />Tel: +32 (0)2 726 00 60</div>","Carrosserie Karreveld <br> Nieuwbrugstraat 77 1830 Machelen")
var point = new google.maps.LatLng(50.812592,4.338656);
var marker = createMarker(point,"Carrosserie Karreveld <br>Alsembergsesteenweg 416 1180 Brussel","+32 (0)2 344 49 70","<div style=width:200px;height:80px;font-family:Georgia; font-size:14px;color:#666;font-style:italic;>Carrosserie Karreveld <br> Alsembergsesteenweg 416 <br>1180 Brussel <br />Tel:+32 (0)2 344 49 70</div>","Carrosserie Karreveld <br> Alsembergsesteenweg 416 1180 Brussel")
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow(
{
//size: new google.maps.Size(150,50)
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// A function to create the marker and set up the event window function
 var image = new google.maps.MarkerImage('/sites/all/themes/karreveld/images/ckmarker.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(50, 50),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(30, 25));
  var shadow = new google.maps.MarkerImage('/sites/all/themes/karreveld/images/ckmarker_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(64, 50),
      new google.maps.Point(0,0),
      new google.maps.Point(30, 25));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
function createMarker(latlng, name, phone, html, location) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image,
shadow: shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
var linkid = "link"+i;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<div id="'+linkid+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a> <span class="location_right">' + phone + '</span><br></div>';
i++;
}