Scripts

Google Earth / Maps op je site

Door PHP Newbie -03-02-2007 00:00 -11.426 views

Met dit script kun je google earth op je site zetten. Ik vind dit zelf een leuke overizhtelijke gemakkelijke combinatie. Wil je nu graag andere dingen erop hebben, dan kun je hier kijken. Reacties zijn altijd welkom. Let op! Voor je dit script kunt gebruiken, moet je bij google even een API key aanvragen.

Download alle bestanden als ZIP

google-earth-maps-op-je-site

[code]
<?php
	//Dit is de code die je van google hebt gekregen (als je die nog niet hebt, kun je hem hier: http://www.google.com/apis/maps/signup.html aanvragen)
	$code = '';
	
	//Dit is het adres waarmee de pagina wordt geopend, en dit adres wordt ook getoond als er een onbekend adres ingegeven wordt
	$eigenadres = 'malders Den Dungen';
	
	/*
		Hieronder kun je aangeven in welke mode de kaart moet staan.
		
		Als je alleen de kaarten wilt zien, gebruik dan 'G_NORMAL_MAP'
		Als je alleen de satelietbeelden wilt zien, gebruik dan 'G_SATELLITE_MAP'
		Als je zowel de kaarten als de satelietbeelden wilt zien, gebruik dan 'G_HYBRID_MAP'
	*/
	
	$soort = 'G_HYBRID_MAP';
	
	//Hoever wil je inzoomen? 1 is Mondiaal niveau, 100 is verst ingezoomd. (google standaard waarde: 15)
	$zoom = 18;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Google Maps check adres</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				
				overflow: hidden;
			}
			
			label {
				padding-left: 10px;	
			}
		</style>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?=$code ?>" type="text/javascript"></script>
		<script type="text/javascript">
			//<![CDATA[
			
			var _myWidth;
			var _myHeight;
			var map = null;
			var geocoder = null;
			var mgr = null;
			
			function load(adres) //de hoofdfunctie
			{
				if (GBrowserIsCompatible())
				{
					map = new GMap2(document.getElementById("map"));
					map.addControl(new GLargeMapControl());
					map.addControl(new GMapTypeControl());
					mwh();
					geocoder = new GClientGeocoder();
					showAddress(adres + " NL");
				}
			}
			
			function showAddress(address)
			{
				if (geocoder)
				{
					geocoder.getLatLng(address,
					
						function(point)
						{
							if (!point) //als het adres niet gevonden is
							{
								alert(address + " Niet gevonden"); //geef een alert
								load('<?=$eigenadres ?>'); //en doe het standaard adres
							}
							else
							{
								map.setCenter(point, <?=$zoom; ?>, <?=$soort;?>);
								
								var marker = new GMarker(point);
						
								map.addOverlay(marker);
								marker.openInfoWindowHtml(address);
							}
						}
					);
				}
			}
			
			// belangrijke hulpfunctie
			function ge(idname)
			{
				var element = document.getElementById(idname);
				
				return element;
			}
			
			
			// ----- mousewheel
			function zoom(oEvent, s)
			{
				if(s == -120)
				{
					map.zoomOut();
				}
				
				if(s == 120)
				{
					map.zoomIn();
				}
			}
			
			
			function mwh()
			{
				var d = ge('map');
				
				if (d)
				{
					try
					{
						if (document.body.addEventListener)
						{
							d.addEventListener('DOMMouseScroll', function(oEvent) {zoom(oEvent, oEvent.detail * -40); }, false);
						}
						 else
						{
							d.onmousewheel = function() { zoom(event, event.wheelDelta); return false; }
						}
					}
					
					catch (ex) {}
				}
			}
			//]]>
		</script>
	</head>
	
    <body onload="load('<?=!empty($_GET['adres']) ? htmlentities($_GET['adres']) : $eigenadres; ?>')" onunload="GUnload()" topmargin="0" leftmargin="0">
	    
		<div id="map" style="width: 100%; height: 400px">
		</div>
		
		<br />
	
		<form action="?" method="get">
			<label>Je adres (binnen nederland): </label>
				<input name="adres" type="text" value="<?php echo isset($_GET['adres']) ? htmlentities($_GET['adres']) : $eigenadres; ?>" />
			
			<input type="submit" value="Go!" />
		</form>
	</body>
</html>
[/code]