//======================================================================||
//                                                                                                                                            ||
//===== GOOGLE MAP KAART OP HOMEPAGE  © VERSIE april  2007 =================||
//                                                                                                                                            ||
//======================================================================||
_mPreferMetric=true;

if (GBrowserIsCompatible()) // Als de browser google maps aankan
{ 

var map = null;    // scroll wiel zoom

//============= nieuwe map initialisieren ====================================|| 
function load()   // Deze functie wordt aangeroepen als de pagina laadt
{ 
//======================================================================||
map = new GMap2(document.getElementById("map"));    //  scroll wiel zoom
//var map = new GMap2(document.getElementById("map"));    //   origineel
//======================================================================||

//============= MAP CENTER POSITIE=======================================||
map.setCenter(new GLatLng(52.100000, 6.000000) );
//======================================================================||

//================= MAP CONTROLS =======================================||
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
new GKeyboardHandler(map);
map.enableContinuousZoom();
map.enableDoubleClickZoom();
map.setMapType(G_HYBRID_MAP);
map.setZoom(8); // Beweeg naar opgegeven zoomlevel. Hoe hoger het getal hoe verder je inzoomt.
//map.enableScrollWheelZoom();
//======================================================================||


//======================== LOSSE MARKERS ===============================||
//var point1 = new GPoint(4.0000, 52.0000);
//var beck = new GMarker(point1);
//map.addOverlay(beck);

//================ marker 1 ==============================================||
var point1 = new GPoint(4.59074, 52.10000);
var html1 = "<span class=ZWART-12>Opa en oma<br>samen op de fiets<br>op het fietspad.</span>"
var oma = new GMarker(point1);
GEvent.addListener(oma, "mouseover", function()
{oma.openInfoWindowHtml(html1)
});
map.addOverlay(oma);
//======================================================================||


//================ marker 2 ==============================================||
var point2 = new GPoint(5.9640, 52.2153);
var html2 = "<span class=ZWART-14>Voertuig iD <span class=ROOD-16> 2 </span><br>staat geparkeerd <br> Geen bijzonderheden</span>"
var auto2 = new GMarker(point2);
GEvent.addListener(auto2, "mouseover", function() 
{auto2.openInfoWindowHtml(html2)
});
map.addOverlay(auto2);
//======================================================================||


//================ marker 3 ==============================================||
var point3 = new GPoint(5.3045, 51.6895);
var html3 = "<span class=ZWART-14>Voertuig iD <span class=ROOD-16> 3 </span><br>staat geparkeerd <br> Geen bijzonderheden</span>"
var auto3 = new GMarker(point3);
GEvent.addListener(auto3, "mouseover", function() 
{auto3.openInfoWindowHtml(html3)
});
map.addOverlay(auto3);
//======================================================================||


//================ marker 4 ==============================================||
var point4 = new GPoint(4.7723, 51.5874);
var html4 = "<span class=ZWART-14>Voertuig iD <span class=ROOD-16> 4 </span><br>staat geparkeerd <br> Geen bijzonderheden</span>"
var auto4 = new GMarker(point4);
GEvent.addListener(auto4, "mouseover", function() 
{auto4.openInfoWindowHtml(html4)
});
map.addOverlay(auto4);
//======================================================================||








//=============== MARKER MET icoontje maken  1 =============================||
icon = new GIcon();
icon.image = "images/googlemaps/car-ani.gif"; // De URL van de afbeelding die je wilt gebruiken
icon.iconSize = new GSize(40, 40); // De grootte van het icoontje
icon.iconAnchor = new GPoint(23, 45); // Anker van het icoontje, dus de plek op de afbeelding die precies op het coördinaat moet staan
icon.infoWindowAnchor = new GPoint(20, 20); // De plek tov het icoontje waar infoballonnetjes moeten verschijnen
//============== Hier ga ik de ballon + AKTIE openen ===============
var infoTabs4 = [
new GInfoWindowTab("Info - 1", "<span class=ZWART-16>Dit voertuig is</span><br><span class=ROOD-18>GESTOLEN</span><br><span class=ZWART-12>Klik op info 2 voor alle gegevens</span>"),
new GInfoWindowTab("info - 2", "<span class=ZWART-12>MERK: Volkswagen<br>TYPE :Golf<br>KLEUR : Rood<br>KENTEKEN :<span class=MENU-10>&nbsp;&nbsp;BO - EF - 01 &nbsp;&nbsp;</span<br>Zoom in voor huidige positie<br>en bel mij AUB de positie door.<br>BEL: 0123-4567890</span>")
];
//=============== MARKER  MAKEN =============================
var point14 = new GMarker(new GLatLng(52.1000,4.4997), icon); // De marker maken
GEvent.addListener(point14, "mouseover", function()
{
point14.openInfoWindowTabsHtml(infoTabs4);
});
map.addOverlay(point14);
point14.openInfoWindowTabsHtml(infoTabs4);
//======================================================================||



//======== TOEVOEGEN EXTRA MAP FUNCTIES =================================||

//============= overview map =============================================||
var ovSize=new GSize(200, 150)
var ovMap=new GOverviewMapControl();
map.addControl(ovMap);
var mini=ovMap.getOverviewMap();
GEvent.addListener(mini,"load",function()
{
mini.setMapType(G_HYBRID_MAP);
});
//======================================================================||




//============== Mousemove gps positie ====================================||
GEvent.addListener(map, "mousemove", function(point)
{
//marker.point = new GLatLng(point);
//marker.redraw(true);
var latLngStrF = point.y.toFixed(14) + ', ' + point.x.toFixed(14) ;
var latLngStr8 = point.y.toFixed(8) + ', ' + point.x.toFixed(8);
var latLngStr6 = point.y.toFixed(6) + ', ' + point.x.toFixed(6);
var latLngStr5 = point.y.toFixed(5) + ', ' + point.x.toFixed(5);
var latLngStr4 = point.y.toFixed(4) + ', ' + point.x.toFixed(4);
document.getElementById("precision").options[0].text = latLngStrF;
document.getElementById("precision").options[1].text = latLngStr8;
document.getElementById("precision").options[2].text = latLngStr6;
document.getElementById("precision").options[3].text = latLngStr5; 
document.getElementById("precision").options[4].text = latLngStr4;
});		
//=====================================================================||


//=====================================================================||
///Geo
//var geocoder = new GClientGeocoder();
//function showAddress(address)
//{
//geocoder.getLatLng(address,function(point)
//{
//if(!point){alert(address+" not found");
//}else{map.panTo(point);
//map.setZoom(18);
//}})}

///Identifying zoomIn button

var zoomButton;
var color;
var paragraphs=0;//main map
var paras=0; //control map

var divs = map.getContainer().getElementsByTagName("div");
for(var i = 0; i<divs.length; i++)
{
var title = divs[i].getAttribute("title");

if(title==_mZoomIn)
{
zoomButton=divs[i];
color=zoomButton.style.backgroundColor;
}}

///Changing color of [Zoom In]

GEvent.addDomListener(zoomButton, "mouseover", function()
{
if (paras>2)
{alert("No use to zoom in. \nDoubleclick if you want to make sure.");
}
});

///Reading number of <p>-elements (var paras, paragraphs)

function count()
{
paragraphs = map.getContainer().getElementsByTagName('p').length;
paras = Emap.getContainer().getElementsByTagName('p').length;
document.getElementById("paragraphs").value=paragraphs;
document.getElementById("paras").value=paras;
zoomButton.style.backgroundColor=color;
if (paras>2)
{
zoomButton.style.backgroundColor="grey";//why does this not work with IE
}
if(paragraphs>4)
{
map.zoomOut(false,true);
}
}

var interval = setInterval("count()",500);

//original script by Esa dec 2006
//======================================================================||


//============= JAVA ZOOM SCROLL WIEL EXTRA  ============================||
}
  // zoom mit scrollrad
  function setZoom(delta) {
    if(delta<0){
      map.zoomOut();
}else{
      map.zoomIn();
}
}

// map onload handler
if (window.attachEvent) 
{
window.attachEvent("onload", function()
{
load();	// internet explorer
});
} else
{
window.addEventListener("load", function() 
{
load(); // firefox und standard browser
}, false);
}
//======================================================================||


// =========== HANDMATIG INPUT GPS POSITIE SET MARKER =====================||
// HTML can only call global functions
function markerLatLng() 
{
var latlng = document.getElementById("latlng").value;
var bits = latlng.split(",");
var htmlz = "<span class=ZWART-12>Lokatie Huidige positie</span>"
var zoek = new GLatLng(parseFloat(bits[0]),parseFloat(bits[1]));
var zoek = new GMarker(zoek); // or whatever you use instead
GEvent.addListener(zoek, "mouseover", function()
{zoek.openInfoWindowHtml(htmlz)
});	 
map.addOverlay(zoek);
}

// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/   
// http://www.econym.demon.co.uk/googlemaps/
//======================================================================||


//==================== EINDE CODE =======================================||
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}

//======================================================================||
//======================================================================||
//======================================================================||