Tutorial: google-Maps für die Homepage

Antworten

Friday

Anfänger

Beiträge: 27

Wohnort: Wolnzach

Danksagungen: 1

Dienstag, 2. Februar 2010, 11:24

google-Maps für die Homepage

Ich hab einen einfachen Tip für Euch, wer auf seiner Homepage Google-Maps mit mehreren Stecknadeln versehen möchte.

Unter http://mapmaker.donkeymagic.co.uk/index.php könnt Ihr einfach und schnell eigene Maps erstellen und den generierten Code auch entsprechend anpassen.

Der Vorteil ist eben der, das völlig unabhängig, welches CMS oder html/php oder was auch immer Ihr auf Eurer Homepage einsetzt, dieser Code verwendet werden kann.

Der Code schaut dann ungefähr so aus:

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Simple Google map</title> 
<!-- //Change the following line to use your own key available from http://www.google.com/apis/maps/signup.html -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAARKYMX3qABRwgBGTOLfvdgBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTmhS_LQj6knfNR9GOtLZ_JFxncNQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Google Map Maker script v.1.1
// (c) 2006 Richard Stephenson http://www.donkeymagic.co.uk
// Email: donkeymagic@gmail.com
// http://mapmaker.donkeymagic.co.uk
var map;
var icon0;
var newpoints = new Array();
 
function addLoadEvent(func) { 
	var oldonload = window.onload; 
	if (typeof window.onload != 'function'){ 
		window.onload = func
	} else { 
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
 
addLoadEvent(loadMap);
addLoadEvent(addPoints);
 
function loadMap() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng( 49.82380908513248, 10.7666015625), 6);
	map.setMapType(G_NORMAL_MAP);
 
	icon0 = new GIcon();
	icon0.image = "http://www.google.com/mapfiles/marker.png";
	icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
	icon0.iconSize = new GSize(20, 34);
	icon0.shadowSize = new GSize(37, 34);
	icon0.iconAnchor = new GPoint(9, 34);
	icon0.infoWindowAnchor = new GPoint(9, 2);
	icon0.infoShadowAnchor = new GPoint(18, 25);
}
 
function addPoints() {
 
	newpoints[0] = new Array(49.439556958940855, 11.05224609375, icon0, 'Nürnberg', 'Ja da ist Nürnberg, wer hätte das gedacht :-)'); 
	newpoints[1] = new Array(48.10743118848038, 11.57958984375, icon0, 'München', 'bla bla :-)'); 
	newpoints[2] = new Array(48.77791275550184, 9.20654296875, icon0, 'Stuttgart', 'auch das soll es geben :-)'); 
 
	for(var i = 0; i < newpoints.length; i++) {
		var point = new GPoint(newpoints[i][1],newpoints[i][0]);
		var popuphtml = newpoints[i][4] ;
		var marker = createMarker(point,newpoints[i][2],popuphtml);
		map.addOverlay(marker);
	}
}
 
function createMarker(point, icon, popuphtml) {
	var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
	var marker = new GMarker(point, icon);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(popuphtml);
	});
	return marker;
}
//]]>
</script>
 
<style type="text/css">
div#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}
</style>
</head>
<body>
<div id="map" style="width:600px;height:450px"></div>
</body>
</html>

Die rot markierten Bereiche sollten geändert werden (also eigenen Key verwenden und auch den <title> entsprechend abändern)
EDIT: na toll, im Code kann man nix markieren, also Zeile 5 und 7 bitte entsprechend ändern!! :whistling: