Zwei Google Maps auf einer Seite

Processus saepius legere littera consequat me. Gothica possim dignissim nobis wisi consuetudium. Quod litterarum ex sit quis molestie. Littera luptatum typi feugiat mirum euismod. Typi claram humanitatis typi vel et. Possim saepius congue mazim fiant notare. Dolor sit feugait tempor iriure illum. Commodo euismod per legunt nunc lius. Nobis autem praesent consectetuer humanitatis habent.

Ipsum claram volutpat facer quarta diam. Dignissim notare ut doming laoreet lectores. Qui lobortis claritas decima in sit. Laoreet dolor nisl putamus qui ea. Suscipit litterarum ea eum vero nobis. Anteposuerit quam eu soluta demonstraverunt in. Investigationes nunc ut nihil esse suscipit. Typi dolore Investigationes decima qui quam.

Lius nonummy mirum dolore exerci tempor. Velit claram qui qui iis iriure. Dynamicus veniam volutpat quod facilisis exerci. Hendrerit typi et facilisis lectorum consectetuer. Quam lectorum sit dolor nunc nibh. Vel diam facer placerat usus minim. Qui soluta claritas aliquip nunc facer. Quam aliquam consuetudium sequitur aliquam quod. Facilisi mazim humanitatis feugiat adipiscing ex. Etiam in et lius nostrud nonummy.

Die Einbindung der Karten:

Siehe davor Voraussetzung

1. Eine HTML Seite erstellen

In Page Inspector bei "Seite" das Kästchen "Vorlage verwenden" ausschalten.
Als Inhalt, diesen Code eingeben:
<!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" xml:lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Karte 1</title>
		<script type="text/javascript"> 
			document.write(
			'<script src="http://maps.google.com/maps?file=api&v=2&hl=de&key=' +
			{ 
				'www.mein-domain.com': 'GOOGLE-API-KEY-für-www.mein-domain.com',
				'www.mein-domain.de': 'GOOGLE-API-KEY-für-www.mein-domain.de',
				'mein-domain.com': 'GOOGLE-API-KEY-für-mein-domain.com',
				'mein-domain.de': 'GOOGLE-API-KEY-für-mein-domain.de'
			}[location.host] +
			'" type="text/javascript"><\/script>' );
		</script>
	</head>
	<body>
		<div id="map" style="width: 500px; height: 300px"></div>
		<noscript>
			<strong>JavaScript muss aktiviert sein um Google Maps zu nutzen.</strong> Es scheint jedoch, dass JavaScript entweder deaktiviert ist oder von Ihrem Browser nicht unterstützt wird. Um Google Maps anzuzeigen aktivieren Sie JavaScript in den Browser-Optionen und versuchen Sie es dann erneut.
		</noscript>

		<script type="text/javascript">
		//<![CDATA[

			if (GBrowserIsCompatible()) {
				function createMarker(point,html) {
					var marker = new GMarker(point);
					GEvent.addListener(marker, "click",
						function() {
							marker.openInfoWindowHtml(html);
						}
					);
					return marker;
				}

				var map = new GMap2(document.getElementById("map"));
				// Zoom: GLargeMapControl() = Zoom mit Slider GSmallMapControl() = Zoom mit Tasten
				map.addControl(new GLargeMapControl());
				// Die Control Tasten (Karte, Satellit, Hybrid)
				map.addControl(new GMapTypeControl());
				map.setCenter(new GLatLng(50.9415187027125, 6.958465576171875),13);

				var point = new GLatLng(50.941522082903475,6.958444118499756);
				var marker = createMarker(point,'<div style="width:240px">Marker mit Link zu dem <a target="_blank" href="http://www.koelner-dom.de/">Kölner Dom</a> - das berühmteste Wahrzeichen Kölns.</div>')
				map.addOverlay(marker);

				var point = new GLatLng(50.937851050731,6.9375228881836);
				var marker = createMarker(point,'Downtown Club<br />Brabanter Str. 15<br />50674 Köln')
				map.addOverlay(marker);

				var point = new GLatLng(50.936404192316,6.9661045074463);
				var marker = createMarker(point,'Deutzer Brücke')
				map.addOverlay(marker);
				}

				// display a warning if the browser was not compatible
			else {
				alert("Google Maps API ist nicht kompatibel mit diesem Browser.");
			}
			window.onunload = GUnload;
		//]]>
		</script>
	</body>
</html>

2. Noch eine HTML Seite erstellen

Auch bei dieser Seite, in Page Inspector bei "Seite" das Kästchen "Vorlage verwenden" ausschalten.
Als Inhalt, diesen Code eingeben:
<!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" xml:lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Karte 2</title>
		<script type="text/javascript"> 
			document.write(
			'<script src="http://maps.google.com/maps?file=api&v=2&hl=de&key=' +
			{ 
				'www.mein-domain.com': 'GOOGLE-API-KEY-für-www.mein-domain.com',
				'www.mein-domain.de': 'GOOGLE-API-KEY-für-www.mein-domain.de',
				'mein-domain.com': 'GOOGLE-API-KEY-für-mein-domain.com',
				'mein-domain.de': 'GOOGLE-API-KEY-für-mein-domain.de'
			}[location.host] +
			'" type="text/javascript"><\/script>' );
		</script>
	</head>
	<body>
		<div id="map" style="width: 500px; height: 300px"></div>
		<noscript>
			<strong>JavaScript muss aktiviert sein um Google Maps zu nutzen.</strong> Es scheint jedoch, dass JavaScript entweder deaktiviert ist oder von Ihrem Browser nicht unterstützt wird. Um Google Maps anzuzeigen aktivieren Sie JavaScript in den Browser-Optionen und versuchen Sie es dann erneut.
		</noscript>

		<script type="text/javascript">
		//<![CDATA[

			if (GBrowserIsCompatible()) {
				function createMarker(point,html) {
					var marker = new GMarker(point);
					GEvent.addListener(marker, "click",
						function() {
							marker.openInfoWindowHtml(html);
						}
					);
					return marker;
				}

				var map = new GMap2(document.getElementById("map"));
				// Zoom: GLargeMapControl() = Zoom mit Slider GSmallMapControl() = Zoom mit Tasten
				map.addControl(new GLargeMapControl());
				// Die Control Tasten (Karte, Satellit, Hybrid)
				map.addControl(new GMapTypeControl());
				map.setCenter(new GLatLng(40.76469763310338, -73.97412300109863),15);

				var point = new GLatLng(40.763824083035516, -73.97297501564026);
				var marker = createMarker(point,'<div style="width:240px"><a target="_blank" href="http://www.apple.com/retail/fifthavenue/">Apple Store, Fith Avenue</a></div>')
				map.addOverlay(marker);

				var point = new GLatLng(40.76521769466795, -73.98006677627563);
				var marker = createMarker(point,'<div style="width:240px"><a target="_blank" href="http://www.carnegiehall.org/SiteCode/Intro.aspx">Carnegie Hall</a></div>')
				map.addOverlay(marker);

				var point = new GLatLng(40.76698912383241, -73.975989818573);
				var marker = createMarker(point,'<div style="width:240px"><a target="_blank" href="http://de.wikipedia.org/wiki/Central_Park">Central Park</a></div>')
				map.addOverlay(marker);
				}

				// display a warning if the browser was not compatible
			else {
				alert("Google Maps API ist nicht kompatibel mit diesem Browser.");
			}
			window.onunload = GUnload;
		//]]>
		</script>
	</body>
</html>

3. Publizieren

Davor die zwei Karten nicht im Menü zeigen lassen.

4. In einer neuen HTML Seite diesen Code eingeben:

<div class="tabelle">
	<table summary="Zwei Google Maps in einer Tabelle" cellspacing="10">
		<caption>
			Zwei Google Maps auf einer Seite
		</caption>
		<tbody>
			<tr>
				<td>
					<iframe src="http://absoluter-Pfad-zu/karte1.html" width="500" height="300" frameborder="0" marginheight="0" marginwidth="0" >
</iframe>
				</td>
				<td rowspan="2">
					<p>Processus saepius legere littera consequat me. Gothica possim dignissim nobis wisi consuetudium. Quod litterarum ex sit quis molestie. Littera luptatum typi feugiat mirum euismod. Typi claram humanitatis typi vel et. Possim saepius congue mazim fiant notare. Dolor sit feugait tempor iriure illum. Commodo euismod per legunt nunc lius. Nobis autem praesent consectetuer humanitatis habent.</p>
					<p>Ipsum claram volutpat facer quarta diam. Dignissim notare ut doming laoreet lectores. Qui lobortis claritas decima in sit. Laoreet dolor nisl putamus qui ea. Suscipit litterarum ea eum vero nobis. Anteposuerit quam eu soluta demonstraverunt in. Investigationes nunc ut nihil esse suscipit. Typi dolore Investigationes decima qui quam.</p>
					<p>Lius nonummy mirum dolore exerci tempor. Velit claram qui qui iis iriure. Dynamicus veniam volutpat quod facilisis exerci. Hendrerit typi et facilisis lectorum consectetuer. Quam lectorum sit dolor nunc nibh. Vel diam facer placerat usus minim. Qui soluta claritas aliquip nunc facer. Quam aliquam consuetudium sequitur aliquam quod. Facilisi mazim humanitatis feugiat adipiscing ex. Etiam in et lius nostrud nonummy.</p>
				</td>
			<tr>
				<td>
					<iframe src="http://absoluter-Pfad-zu/karte2.html" width="500" height="300" frameborder="0" marginheight="0" marginwidth="0" >
</iframe>
				</td>
			</tr>
		</tbody>
	</table>
</div>
U.U. der Tabelle CSS Angaben vergeben:
/* 
	smooth taste table styles
	written by Thomas Opp http://www.yaway.de
*/
table {
  border-collapse: collapse;
  border: 1px solid #38160C;
  font: normal 11px verdana, arial, helvetica, sans-serif;
  color: #F6ECF0;
  background: #641B35;
  }
caption {
  text-align: left;
  font: normal 11px verdana, arial, helvetica, sans-serif;
  background: transparent;
  }
td, th {
  border: 1px dashed #B85A7C;
  padding: .8em;
  color: #F6ECF0;
  }
thead th, tfoot th {
  font: bold 11px verdana, arial, helvetica, sans-serif;
  border: 1px solid #A85070;;
  text-align: left;
  background: #38160C;
  color: #F6ECF0;
  padding-top:6px;
  }
tbody td a {
  background: transparent;
  text-decoration: none;
  color: #F6ECF0;
  }
tbody td a:hover {
  background: transparent;
  color: #FFFFFF;
  }
tbody th a {
  font: normal 11px verdana, arial, helvetica, sans-serif;
  background: transparent;
  text-decoration: none;
  font-weight:normal;
  color: #F6ECF0;
  }
tbody th a:hover {
  background: transparent;
  color: #FFFFFF;
  }
tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
tfoot td {
  border: 1px solid #38160C;
  background: #38160C;
  padding-top:6px;
  }
.odd {
  background: #7B2342;
  }
tbody tr:hover {
  background: #51152A;
  }
tbody tr:hover th,
tbody tr.odd:hover th {
  background: #51152A;
  }

5. Publizieren