Google maps

Google Maps 3

• https://developers.google.com/maps/documentation/javascript/markers

<h1>Google Map 3</h1>
<p>
	minLongitude: {minLongitude} <br /> 
	midLongitude: {midLongitude} <br /> 
	maxLongitude: {maxLongitude} <br /> 
	minLatitude: {minLatitude} <br /> 
	midLatitude: {midLatitude} <br /> 
	maxLatitude: {maxLatitude}
</p>
			<!--callback=initMap&-->
<script src="//maps.googleapis.com/maps/api/js?key=" type="text/javascript"></script>

<div class="nc-global-google-map ">
	<div id="ncGlobalGoogleMap3" style="width: 1200px; height: 600px"></div>
</div>
<script type="text/javascript">
function addInfoWindow(map, marker, message) {
	var infoWindow = new google.maps.InfoWindow({
		content: message
	});
	google.maps.event.addListener(marker, 'click', function () {
		infoWindow.open(map, marker);
	});
}	
function ncInitializeGmaps() {
	var midLatitude = {midLatitude};
	var midLongitude = {midLongitude};
	var map = new google.maps.Map(
		document.getElementById('ncGlobalGoogleMap3'), 
		{
			center: new google.maps.LatLng(midLatitude, midLongitude),
			zoom: 10,
			mapTypeId: 'roadmap'
		}
	);

	<f:for each="{ancvendorids}" as="ancvendorid" iteration="i">
		var anclatitude = {ancvendorid.anclatitude}; 
		var anclongitude = {ancvendorid.anclongitude}; 
		var title = "{ancvendorid.title}";
		var index = "{i.index}";
		var address = "{ancvendorid.ancaddress} <br /> {ancvendorid.anczip} {ancvendorid.anccity}";
		var ancwww = '<f:format.raw>{ancvendorid.ancwww}</f:format.raw>';		
		var ancdetailpage = "{ancvendorid.ancdetailpage}";
		if(ancdetailpage) {
			var anclink = '<f:link.action pageUid="{ancvendorid.ancdetailpage}" action="ncshow" controller="Ncelement" pluginName="ancelementlist" extensionName="anclistel20" arguments="{uid:ancvendorid.uid}" >interne Seite</f:link.action>';		
		} else {
			var anclink = '';
		}
				
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng( anclatitude, anclongitude ),
			map: map,
			title: title,
			index : index
		})
		addInfoWindow(map, marker, "<b>"+title+"</b><p>"+address+"</p><p>"+ancwww+"</p><p>"+anclink+"</p>");

		
	</f:for>

}

jQuery(document).ready(function() {
	google.maps.event.addDomListener(window, 'load', ncInitializeGmaps);
}); 
</script>

Google Maps 2

• mit typo3 fluid for schleife

<h1>Google Map 2</h1>

<p>
	minLongitude: {minLongitude} <br /> 
	midLongitude: {midLongitude} <br /> 
	maxLongitude: {maxLongitude} <br /> 
	minLatitude: {minLatitude} <br /> 
	midLatitude: {midLatitude} <br /> 
	maxLatitude: {maxLatitude}
</p>


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
  type="text/javascript"></script>
<script type="text/javascript">


function ncLoadGmaps() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng( {midLatitude} , {midLongitude} ), 10);
		
		<f:for each="{ancvendorids}" as="ancvendorid" iteration="i">
			var punkt = new GLatLng( {ancvendorid.anclatitude} , {ancvendorid.anclongitude});

			var marke = new GMarker(punkt);
			map.addOverlay(marke);		
		</f:for>
	}
}

jQuery(document).ready(function() {
	ncLoadGmaps();
}); 

</script>
<div class="nc-global-google-map ">
	<div id="map" style="width: 1200px; height: 600px"></div>
</div>