Google maps: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(Die Seite wurde neu angelegt: „ == Google Maps 2 == <source lang=html> <h1>Google Map 2</h1> <script src="http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript"></…“)
 
(Google Maps 3)
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
  
 +
 +
== Google Maps 3 ==
 +
 +
* https://developers.google.com/maps/documentation/javascript/markers
 +
 +
<source lang=html>
 +
<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>
 +
 +
</source>
  
 
== Google Maps 2 ==
 
== Google Maps 2 ==
 
+
* mit typo3 fluid for schleife
 
<source lang=html>
 
<source lang=html>
 
<h1>Google Map 2</h1>
 
<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="
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
 
   type="text/javascript"></script>
 
   type="text/javascript"></script>

Aktuelle Version vom 1. Mai 2019, 08:51 Uhr


Google Maps 3

<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>