<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Google Maps API - Anleitung damit es funktioniert – revilodesign.de</title>
	<atom:link href="https://www.revilodesign.de/blog/google-maps-api/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.revilodesign.de/blog/google-maps-api/</link>
	<description></description>
	<lastBuildDate>Tue, 24 Jun 2025 08:02:42 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>
	<item>
		<title>Google My Business Bewertung auf Webseite anzeigen</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/google-my-business-bewertung-auf-webseite-anzeigen/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/google-my-business-bewertung-auf-webseite-anzeigen/#comments</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Wed, 21 Aug 2019 12:50:25 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1999</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-my-business-bewertung-auf-webseite-anzeigen/">Google My Business Bewertung auf Webseite anzeigen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[<section id="block_9f12ab8865459743177403d160a546a5" class="revilodesign demo">
	<div class="content">
		<article class="article-content"><p>Die <strong>Google My Business Bewertung auf der eigenen Webseite anzeigen lassen</strong> ist gar nicht so kompliziert. Im folgenden Beispiel möchte ich euch zeigen, wie man die My Business Bewertungen des Berliner Fernsehturms ausliest.</p>
</article>		
		<blockquote class="error"><p><strong>You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started</strong></p></blockquote>		
	</div>
</section>


<section id="block_69e1ecb578201eef57a67ed71ea0cc58" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image"><span class="text bottom right inside">Screenshot: 21.08.2019</span>
		<picture class="aligncenter pixel" data-image="2011">
			<source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-300x204.webp" type="image/webp" media="(max-width: 300px)" width="300" height="204"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-300x204.jpg" type="image/jpeg" media="(max-width: 300px)" width="300" height="204"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-150x150.jpg" type="image/jpeg" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-768x521.webp" type="image/webp" media="(max-width: 768px)" width="768" height="521"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-768x521.jpg" type="image/jpeg" media="(max-width: 768px)" width="768" height="521"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-400x271.webp" type="image/webp" media="(max-width: 400px)" width="400" height="271"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-400x271.jpg" type="image/jpeg" media="(max-width: 400px)" width="400" height="271"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-500x339.webp" type="image/webp" media="(max-width: 500px)" width="500" height="339"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-500x339.jpg" type="image/jpeg" media="(max-width: 500px)" width="500" height="339"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-600x407.webp" type="image/webp" media="(max-width: 600px)" width="600" height="407"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-600x407.jpg" type="image/jpeg" media="(max-width: 600px)" width="600" height="407"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-700x475.webp" type="image/webp" media="(max-width: 700px)" width="700" height="475"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-700x475.jpg" type="image/jpeg" media="(max-width: 700px)" width="700" height="475"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-800x543.webp" type="image/webp" media="(max-width: 800px)" width="800" height="543"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-800x543.jpg" type="image/jpeg" media="(max-width: 800px)" width="800" height="543"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-900x611.webp" type="image/webp" media="(max-width: 900px)" width="900" height="611"><source srcset="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business-900x611.jpg" type="image/jpeg" media="(max-width: 900px)" width="900" height="611">
			<img fetchpriority="high" decoding="async" src="https://www.revilodesign.de/media/fernsehturm-berlin-bewertung-my-business.webp" alt="fernsehturm berlin bewertung my business" width="914" height="620" />
		</picture></span></span></p>
	</div>
</section>


<section id="block_559b54d2665f65eeb092a7fe23a4c4af" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h2>Step 1: API Key erstellen</h2>
<p>Zunächst einmal müsst Ihr Euch <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/" title="einen Google Maps API Key erstellen">einen Google Maps API Key erstellen</a>. Dies hatte ich bereits ausführlich in einen vorherigen Beitrag beschrieben.</p>
<h2>Step 2: Place ID herausfinden</h2>
<p>Als nächstes müsst Ihr die Place ID des Google My Business Eintrages herausfinden. Das geht ganz einfach <a href="https://www.revilodesign.de/tools/google-maps-api-place-id-finder/" title="google maps place id finder">hier &#8211; Google Maps Place ID Finder</a>. Gibt dort einfach oben den Namen ein und kopiert die Place ID.</p>
<h2>Step 3: Google Place json Link bauen</h2>
<p>Mit der Place ID und dem Google API Key habt ihr nun alles zusammen, was Ihr braucht, um die <u>My Business Bewertungen von Google auszulesen</u>.</p>
</article>		<div id="code-block_559b54d2665f65eeb092a7fe23a4c4af" class="codeblock">
			<div class="code-language">plaintext</div>
			<pre>
				<code class="language-plaintext" data-highlighted="yes">https://maps.googleapis.com/maps/api/place/details/json?placeid={PLACE_ID}&fields=user_ratings_total,rating&key={API_KEY}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>




<section id="block_12db7e1bcefdf900251e97ca1f6a3e1f" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="2003">
			<source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-300x151.webp" type="image/webp" media="(max-width: 300px)" width="300" height="151"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-300x151.jpg" type="image/jpeg" media="(max-width: 300px)" width="300" height="151"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-150x150.jpg" type="image/jpeg" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-768x388.webp" type="image/webp" media="(max-width: 768px)" width="768" height="388"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-768x388.jpg" type="image/jpeg" media="(max-width: 768px)" width="768" height="388"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-400x202.webp" type="image/webp" media="(max-width: 400px)" width="400" height="202"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-400x202.jpg" type="image/jpeg" media="(max-width: 400px)" width="400" height="202"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-500x252.webp" type="image/webp" media="(max-width: 500px)" width="500" height="252"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-500x252.jpg" type="image/jpeg" media="(max-width: 500px)" width="500" height="252"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-600x303.webp" type="image/webp" media="(max-width: 600px)" width="600" height="303"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-600x303.jpg" type="image/jpeg" media="(max-width: 600px)" width="600" height="303"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-700x353.webp" type="image/webp" media="(max-width: 700px)" width="700" height="353"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-700x353.jpg" type="image/jpeg" media="(max-width: 700px)" width="700" height="353"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-800x404.webp" type="image/webp" media="(max-width: 800px)" width="800" height="404"><source srcset="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen-800x404.jpg" type="image/jpeg" media="(max-width: 800px)" width="800" height="404">
			<img decoding="async" src="https://www.revilodesign.de/media/google-my-business-bewertung-auf-webseite-anzeigen.webp" alt="google-my-business-bewertung-auf-webseite-anzeigen" width="828" height="418" />
		</picture></span></span></p>
	</div>
</section>


<section id="block_aeb24f3d29fda462758b2b847f3b5c75" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>Wer sich mehr als <code>user_ratings_total</code> und <code>rating</code> anzeigen lassen will, der kann einfach <code>&fields=user_ratings_total,rating</code> weglassen. Dann sollten alle Daten zum Google My Business Eintrag angezeigt werden. In meinem Beispiel reichen mir aber die zwei Felder.</p>
<h2>Step 4: My Business Bewertung auf Webseite einbinden</h2>
<p>Nun müssen die Daten nur noch mit php ausgelesen und anschließend in die Webseite eingebunden werden. Für meinen Anwendungsbereich hat der folgende Code gereicht.</p>
</article>		<div id="code-block_aeb24f3d29fda462758b2b847f3b5c75" class="codeblock">
			<div class="code-language">php</div>
			<pre>
				<code class="language-php">json_url       =   'https://maps.googleapis.com/maps/api/place/details/json?placeid={PLACE_ID}&fields=user_ratings_total,rating&key={API_KEY}';
$json_content   =   file_get_contents($json_url);
$json_data      =   json_decode($json_content, true);
if ( isset($json_data) ) {
    $rating             =   $json_data['result']['rating'];
    $user_ratings_total =   $json_data['result']['user_ratings_total'];
    echo '&lt;p&gt;Der Fernsehturm hat eine durchschnittliche Bewertung von ' . $rating  . ' bei ' . $user_ratings_total . ' abgegebenen Stimmen.&lt;/p&gt;';
} else {
    echo '&lt;p&gt;Ups! Da ist wohl was schief gegangen.&lt;/p&gt;';
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


	<section id="block_605fff0efb713f1ef23cfaf88a7b8960" class="revilodesign revilodesign-text text section-1 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><p>Die Ausgabe sollte im besten Fall wie folgt aussehen:</p>
<blockquote>
<p>Der Fernsehturm hat eine durchschnittliche Bewertung von 4.4 bei 22895 abgegebenen Stimmen.</p>
</blockquote>
<p>Das wars!</p>
<p>Viel Spaß beim einbinden der My Business Bewertungen in Eure Webseite. Ich hoffe ich konnte euch helfen. Lasst mir doch ein Kommentar da und sagt mir, wofür Ihr den Code gebraucht habt.</p>
</article>				</div>
							</div>
		</div>
			</section>
<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-my-business-bewertung-auf-webseite-anzeigen/">Google My Business Bewertung auf Webseite anzeigen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/google-my-business-bewertung-auf-webseite-anzeigen/feed/</wfw:commentRss>
			<slash:comments>7</slash:comments>
		
		
			</item>
		<item>
		<title>Google Maps Api &#8211; Timezone in UTC Zeitzonen umrechnen</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-timezone-in-utc-zeitzonen-umrechnen/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-timezone-in-utc-zeitzonen-umrechnen/#respond</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Mon, 19 Nov 2018 03:47:49 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1502</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-timezone-in-utc-zeitzonen-umrechnen/">Google Maps Api &#8211; Timezone in UTC Zeitzonen umrechnen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[<section id="block_290f512b09a64251f1bf4314bc325709" class="revilodesign demo">
	<div class="content">
		<article class="article-content"><p>Mithilfe der <strong>Google Maps API kann man die Timezone in UTC Zeitzonen umrechnen</strong>. Doch ich hatte am Anfang Probleme zu verstehen, wie ich das mache. Aber nach ein bisschen querlesen im Internet habe ich es verstanden und mir eine PHP Funktion gebaut, die mir automatisch die <strong>Timezone (rawOffset) in UTC/GMT umrechnet</strong>. Ich möchte Euch in meinem kleinen Tutorial zeigen, wie auch Ihr die Timezone mit PHP umrechnen könnt.</p>
<p><i class="fa-solid fa-circle-info"></i> <strong>Einfach in die Karte klicken und Euch wird die entsprechende Zeitzone angezeigt</strong></p>
</article>		
		<div id="finder">
	<div id="geometry"></div>
	<div id="map"></div>
	<div id="datas"></div>
</div>

<script>
	function initMap() {
	
		var markers = [];

		autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')),{
			types: ['geocode']
		});
		
		var myLatLng = {
			lat			:	52.520008,
			lng			:	13.404954
		};
			
		var map		=	new google.maps.Map(document.getElementById('map'), {
			zoom		:	2,
			center		:	myLatLng
		});
		
		
		// START BY CLICK
		jQuery('div#find').on('click', function() {
			LatLngSearch();			
		});
		
		// DELETE ALL MARKERS
		function DeleteMarkers() {
			for (var i = 0; i < markers.length; i++) {
				markers[i].setMap(null);
			}
			markers = [];
		};
		
		// CLICK ON MAP
		google.maps.event.addListener(map, 'click', function(event) {
			placeMarker(map, event.latLng);
			LatLngClick( event.latLng );
		});
		
		function placeMarker(map, location) {
			var marker = new google.maps.Marker({
				position	:	location,
				map			:	map,
				icon		:	new google.maps.MarkerImage( '/wp-content/themes/revilodesign/images/icon_empty.svg', null, null, null, new google.maps.Size(1,1) )
			});
							
			// ADD MARKER TO ARRAY
			DeleteMarkers();
		}
		
		// LOAD DATA BY CLICK ON MAP
		function LatLngClick(latLng) {
			
			var lat			=	latLng.lat();
			var lng			=	latLng.lng();
			
			if ( lat ) {
				
				var request		=	$.ajax({
					url			:	"https://www.revilodesign.de/wp-content/themes/revilodesign/demos/ajax_latlon.php",
					method		:	"POST",
					data		:	{
										lat				:	lat,
										lng				:	lng,
										showPlaceId		:	'false'
									},
					dataType	:	'json',
					success		:	function(result) {
						jQuery('div#datas').html('').addClass('show');
						jQuery('div#geometry').html('').addClass('show');
						
						if ( result['timezone'] ) {
							jQuery('div#geometry').append('<div><strong>Zeitzone:</strong> ' + result['timezone'] + '</div>');
						}
						if ( result['address'] ) {
							jQuery('div#datas').append('<h2>Ergebnis: ' + result['address'] + '</h2>');
						}
						if ( result['lat'] ) {
							jQuery('div#datas').append('<p><strong>Latitude:</strong> <input readonly="" value="' + result['lat'] + '" /></p>');
						}
						if ( result['lng'] ) {
							jQuery('div#datas').append('<p><strong>Longitude:</strong> <input readonly="" value="' + result['lng'] + '" /></p>');
						}
						if ( result['gps_b'] ) {
							jQuery('div#datas').append('<p><strong>GPS Breitengrad:</strong> ' + result['gps_b'] + '</p>');
						}
						if ( result['gps_l'] ) {
							jQuery('div#datas').append('<p><strong>GPS Längengrad:</strong> ' + result['gps_l'] + '</p>');
						}
						if ( result['country'] ) {
							jQuery('div#datas').append('<p><strong>Land:</strong> ' + result['country_code'] + ' ' + result['country'] + '</p>');
						}
						if ( result['locality'] ) {
							jQuery('div#datas').append('<p><strong>Region:</strong> ' + result['locality'] + '</p>');
						}
						if ( result['street_number'] ) {
							jQuery('div#datas').append('<p><strong>Strasse / Nr:</strong> ' + result['street_name'] + ' ' + result['street_number'] + '</p>');
						}
						if ( result['postal_code'] ) {
							jQuery('div#datas').append('<p><strong>PLZ:</strong> ' + result['postal_code'] + '</p>');
						}
						
						if ( result['lat'] && result['lng'] ) {
							DeleteMarkers();
							
							var searchLatLng = {
								lat			:	result['lat'],
								lng			:	result['lng']
							};
							
							// KARTE NEU POSITIONIEREN
							var map		=	new google.maps.Map(document.getElementById('map'), {
								zoom		:	9,
								center		:	searchLatLng
							});
							
							var marker = new google.maps.Marker({
								map			:	map,
								position	:	searchLatLng,
								animation	:	google.maps.Animation.DROP
				            });
				            
				            if ( result['locality'] ) {
					            var headline	=	 '<h3>' + result['locality'] + '</h3>';
				            } else if ( result['country'] ) {
					            var headline	=	 '<h3>' + result['country'] + '</h3>';
				            }
				            
				            var infowindow	=	new google.maps.InfoWindow({
					            
								content: headline + '<p><strong>Zeitzone:</strong> ' + result['timezone'] + '</p>'
							});
							infowindow.open(map,marker);
							
							// ADD MARKER TO ARRAY
							markers.push(marker);
							
							// CLICK ON MAP
							google.maps.event.addListener(map, 'click', function(event) {
								placeMarker(map, event.latLng);
								LatLngClick( event.latLng );
							});
						}
						
					},
					error		:	function (xhr, ajaxOptions, thrownError) {
						alert(xhr.status);
						alert(thrownError);
					}
				});
			}
		}
	}
	
</script>


		
	</div>
</section>


<section id="block_5504115cd1dc6c11c6e6a22163aa507a" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h2>Timezone mit der Google Maps API erhalten und in UTC/GMT umrechnen</h2>
<p>Um die <strong>Timezone in UTC umwandeln</strong> zu können benötigt Ihr vorab erst eimal die folgende Daten:</p>
<ol>
<li>Latitude &#038; Longitude des gesuchten Ortes</li>
<li>Timestamp (Aktueller oder einen in der Vergangenheit/Zukunft liegender)</li>
<li>Euren persönlichen Google API Key</li>
</ol>
<h3>Aufrufen der Google Maps Timezone API</h3>
<p>Wenn Ihr die benötigten Daten habt, dann könnt Ihr diese mit den Platzhaltern im folgenden Link austauschen.</p>
</article>		<div id="code-block_5504115cd1dc6c11c6e6a22163aa507a" class="codeblock">
			<div class="code-language">html</div>
			<pre>
				<code class="language-xml" data-highlighted="yes">https://maps.googleapis.com/maps/api/timezone/json?location=LAT,LNG&timestamp=TIMESTAMP&key=DEIN_API_KEY</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


	<section id="block_b90498ba31b1f25fb74ef8f66b64dcc9" class="revilodesign revilodesign-text text section-2 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><h4>Beispiel</h4>
<p>In den folgenden Beispielen möchte ich mit den Daten von Berlin arbeiten, die wie folgt aussehen:</p>
<ul>
<li><strong>Lat:</strong> 52.5200066</li>
<li><strong>Lng:</strong> 13.404954</li>
<li><strong>Timestamp:</strong> 1458000000</li>
</ul>
<p>Um sicher zu gehen, dass der Link richtig zusammengebaut ist, gebe ich <a href="https://maps.googleapis.com/maps/api/timezone/json?location=52.5200066,13.404954&#038;timestamp=1458000000&#038;key=DEIN_API_KEY" rel="nofollow" title="google maps timezone api link" target="_blank">Meinen Link</a> (API KEY anfügen!) sicherheitshalber in einen neuen Tab ein und erhalte folgendes Resultat:</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_bd969958c6e5e6e79259374a26a2f3af" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1506">
			<source srcset="https://www.revilodesign.de/media/google-maps-timezone-api-berlin-300x90.webp" type="image/webp" media="(max-width: 300px)" width="300" height="90"><source srcset="https://www.revilodesign.de/media/google-maps-timezone-api-berlin-300x90.jpg" type="image/jpeg" media="(max-width: 300px)" width="300" height="90"><source srcset="https://www.revilodesign.de/media/google-maps-timezone-api-berlin-150x128.webp" type="image/webp" media="(max-width: 150px)" width="150" height="128"><source srcset="https://www.revilodesign.de/media/google-maps-timezone-api-berlin-150x128.jpg" type="image/jpeg" media="(max-width: 150px)" width="150" height="128"><source srcset="https://www.revilodesign.de/media/google-maps-timezone-api-berlin-400x120.webp" type="image/webp" media="(max-width: 400px)" width="400" height="120"><source srcset="https://www.revilodesign.de/media/google-maps-timezone-api-berlin-400x120.jpg" type="image/jpeg" media="(max-width: 400px)" width="400" height="120">
			<img decoding="async" src="https://www.revilodesign.de/media/google-maps-timezone-api-berlin.webp" alt="google maps timezone api berlin" width="427" height="128" />
		</picture></span></span></p>
	</div>
</section>


<section id="block_b7cfc6dc05430ab67a5f2d137973b813" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>Solltet Ihr ebenfalls Daten mit den <strong>Status OK</strong> erhalten, dann können wir mit der <strong>Umrechnung in UTC/GMT</strong> beginnen.</p>
<h2>Wie rechnet man Timezone in UTC/GMT mit der Google Maps Api um?</h2>
<p>Um eine eigen PHP Funktion schreiben zu können musste ich erst einmal verstehen, was mir die Google Maps Timezone API bietet. In meinem Beispiel erhalte ich folgende Daten</p>
<p><a href="#dstOffset" title="dstOffset">&#8222;dstOffset&#8220;</a> 	:	0,<br />
<a href="#rawOffset" title="rawOffset">&#8222;rawOffset&#8220;</a> 	:	3600,<br />
<a href="#status" title="status">&#8222;status&#8220;</a> 		:	&#8222;OK&#8220;,<br />
<a href="#timeZoneId" title="timeZoneId">&#8222;timeZoneId&#8220;</a> 	:	&#8222;Europe/Berlin&#8220;,<br />
<a href="#timeZoneName" title="timeZoneName">&#8222;timeZoneName&#8220;</a> 	:	&#8222;Central European Standard Time&#8220;</p>
<h3 id="dstOffset">dstOffset</h3>
<p>Gibt in Sekunden an, ob sich die Zeitzone in der Sommerzeit befindet (3600) oder 0, wenn Sie sich nicht in der Sommerzeit befindet.</p>
<h3 id="rawOffset">rawOffset</h3>
<p>Dies gibt die UTC (in Sekunden) für die angegebene Position an, unabhängig von der Sommerzeit.</p>
<h3 id="Status">Status</h3>
<p>Selbsterklärend!</p>
<h3 id="timeZoneId">timeZoneId</h3>
<p>Gibt den Namen der Zeitzone wieder</p>
<h3 id="timeZoneName">timeZoneName</h3>
<p>Enthält den Langnamen der Zeitzone</p>
<h2>Formel zur Berechnung der UTC Zeitzonen</h2>
<p>Nun möchte ich zu ein paar Beispielen kommen, anhand derer ich zeigen möchte, wie man den <strong>Timezone in UTC umrechnen</strong> kann:</p>
<blockquote>
<p><strong>Formel:</strong> UTC = ( rawOffset / 3600 ) + ( dstOffset / 3600 )</p>
</blockquote>
<h3>Beispiel 1 &#8211; Berlin</h3>
<p>&#8222;dstOffset&#8220; 	:	0,<br />
&#8222;rawOffset&#8220; 	:	3600,</p>
<p><strong>Rechnung:</strong> ( 3600 / 3600 ) + ( 0 / 3600 ) = UTC/GMT +1 Stunde</p>
<h3>Beispiel 2 &#8211; New York (Sommerzeit)</h3>
<p>&#8222;dstOffset&#8220; 	:	3600,<br />
&#8222;rawOffset&#8220; 	:	-18000,</p>
<p><strong>Rechnung:</strong> ( -18000 / 3600 ) + ( 3600 / 3600 ) = UTC/GMT -4 Stunde</p>
<h3>Beispiel 3 &#8211; New York (Winterzeit)</h3>
<p>&#8222;dstOffset&#8220; 	:	0,<br />
&#8222;rawOffset&#8220; 	:	-18000,</p>
<p><strong>Rechnung:</strong> ( -18000 / 3600 ) + ( 0 / 3600 ) = UTC/GMT -5 Stunde</p>
<h3>Beispiel 4 &#8211; Australien</h3>
<p>&#8222;dstOffset&#8220; : 3600,<br />
&#8222;rawOffset&#8220; : 34200,</p>
<p><strong>Rechnung:</strong> ( 34200 / 3600 ) + ( 3600 / 3600 ) = UTC/GMT +10.5 Stunde</p>
<p>Hier tritt eine Besonderheit auf, denn es gibt manchmal den Fall, dass das Ergebnis eine Nachkommastelle auswirft. Diese muss einfach mit 60 multipliziert werden und schon erhält man die Minuten.</p>
<p><strong>Rechnung:</strong> 0.5 * 60 = 30 Minuten</p>
<p>Demnach wäre das Ergebnis von Beispiel 4: <strong>+10.30 Stunde</strong></p>
<h2>PHP Funktion &#8211; Umrechnen der Timezone in UTC/GMT</h2>
<p>Nun kommen wir aber endlich zur Funktion, die <strong>automatisch die Timezone in UTC umrechnet</strong>.</p>
<p>Zunächst einmal rufe ich die Funktion im Template auf</p>
</article>		<div id="code-block_b7cfc6dc05430ab67a5f2d137973b813" class="codeblock">
			<div class="code-language">php</div>
			<pre>
				<code class="language-php">utcTimezone($rawOffset, $dstOffset, $timeZoneId, $status );</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_4f21c01c019a8e55b0f35d10483cdf90" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>Anschließend rechne ich die Werte in der Funktion aus und gebe die UTC/GMT Zeitzone automatisch zurück.</p>
</article>		<div id="code-block_4f21c01c019a8e55b0f35d10483cdf90" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">function utcTimezone( $rawOffset, $dstOffset, $timeZoneId, $status ) {
	if ( $status == 'OK' ) {
		$dstOffset		=	$dstOffset / 3600;
		
		$rawOffset		=	( $rawOffset / 3600 );
		$rawOffset		=	explode('.', $rawOffset);
		
		if ( $rawOffset[1] ) {
			$rawOffsetMin	=	'.' . $rawOffset[1] * 6;
		}
		
		$offset			=	$rawOffset[0] + $dstOffset;
		if ( $offset &gt;= 0 ) {
			$plus		=	'+';
		}
		
		if ( $timeZoneId ) {
			$timeZoneName	=	' &lt;small&gt;(' . $timeZoneId . ')&lt;/small&gt;';
		}
		
		$return			=	'UTC/GMT ' . $plus . $offset . $rawOffsetMin . 'h' . $timeZoneName;
	} else {
		$return			=	'Fehler';
	}
	
	return $return;
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>
<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-timezone-in-utc-zeitzonen-umrechnen/">Google Maps Api &#8211; Timezone in UTC Zeitzonen umrechnen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-timezone-in-utc-zeitzonen-umrechnen/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Google Maps API &#8211; Karte mit mehreren Marker und Infowindow</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/#comments</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Sat, 17 Nov 2018 00:37:33 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1456</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/">Google Maps API &#8211; Karte mit mehreren Marker und Infowindow</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[<section id="block_283d990bde80aea034dfeef3793df317" class="revilodesign demo">
	<div class="content">
		<article class="article-content"><p>Im heutigen Beitrag möchte ich Euch zeigen, wie Ihr <strong>mehrere Marker mit einem Infowindow in die Google Maps</strong> Karte einfügen könnt. Gerade beim erstellen einer Karte mit dem Ziel den Besucher die Standorte von Stores, Filialen oder anderen Unternehmen aufzuzeigen macht dies Sinn. Noch mehr Sinn macht es, wenn man nicht nur die Marker platziert, sondern auch noch sogenannte Infowindows hinzufügt, die sich beim anklicken des Markers öffnen. Somit bietet man den Besucher den bestmöglichen Nutzen der Google Maps Karte.</p>
<h2>So erstellst Du eine Google Maps Karte mit mehreren Marker und Infowindow</h2>
<p>Im folgenden Beispiel habe ich eine <strong>Google Maps Karte mit multiple Marker</strong> erstellt, die beliebte Reiseziele in Deutschland von mir zeigen. </p>
</article>		
		<div id="map"></div>


<script>
	function initMap() {
		var myLatLng = {
			lat			:	52.520008,
			lng			:	13.404954
		};
		var mapOptions		=	{
			zoom			:	5,
			mapTypeControl	:	false,
			center			:	myLatLng,
			styles			:	
	[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]		};
		
		map = new google.maps.Map(document.getElementById('map'), mapOptions);
		
		var locations		=	new Array();							
		var locations		=	[
			{
				lat		: 	51.0504088, 
				lng		:	13.7372621,
				city	:	'Dresden',
				marker	:	'https://www.revilodesign.de/wp-content/themes/revilodesign/assets/images/icon_marker_orange.svg'
			},{
				lat		: 	53.5510846, 
				lng		: 	9.9936819,
				city	: 	'Hamburg',
				marker	:	'https://www.revilodesign.de/wp-content/themes/revilodesign/assets/images/icon_marker_blue.svg'
			},{
				lat		: 	53.0792962, 
				lng		: 	8.8016936,
				city	: 	'Bremen',
				marker	:	'https://www.revilodesign.de/wp-content/themes/revilodesign/assets/images/icon_marker_turkis.svg'
			},{
				lat		: 	48.1351253, 
				lng		: 	11.5819805,
				city	: 	'München',
				marker	:	'https://www.revilodesign.de/wp-content/themes/revilodesign/assets/images/icon_marker_red.svg'
			},{
				lat		: 	54.3863879, 
				lng		: 	12.1703445,
				city	: 	'Ostsee',
				marker	:	'https://www.revilodesign.de/wp-content/themes/revilodesign/assets/images/icon_marker_green.svg'
			},{
				lat		: 	51.75, 
				lng		: 	10.633333,
				city	: 	'Harz',
				marker	:	'https://www.revilodesign.de/wp-content/themes/revilodesign/assets/images/icon_marker_purple.svg'
			}
		];  

		
		var infowindow		=	new google.maps.InfoWindow();
		
		for (i = 0; i < locations.length; i++) { 
			marker = new google.maps.Marker({
				position	:	new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
				map			:	map,
				animation	:	google.maps.Animation.DROP,
				icon		:	new google.maps.MarkerImage( locations[i]['marker'], null, null, null, new google.maps.Size(24, 24) ),
			});
			
			google.maps.event.addListener(marker, 'click', (function(marker, i) {
				return function() {
					infowindow.setContent('<h3>' + locations[i]['city'] + '</h3>');
					infowindow.open(map, marker);
				}
			})(marker, i));
		}
	}
</script>

		
	</div>
</section>


<section id="block_aab24980f992a1490d7bb9a5148e9507" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h3>Erstellen eines Arrays</h3>
<p>Anders als beim <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-einfacher-marker-mit-infowindow-hinzufuegen/">Erstellen einer Google Maps Karte mit einem einfachen Marker</a> müssen die Daten beim <strong>erstellen mehrerer Marker auf einer Google Maps Karte</strong> zunächst in einem array gespeichert werden.</p>
</article>		<div id="code-block_aab24980f992a1490d7bb9a5148e9507" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">var locations		=	new Array();							
var locations		=	[
	{
		lat		: 	51.0504088, 
		lng		:	13.7372621,
		city	:	'Dresden',
		marker	:	'/images/icon_marker_orange.svg'
	},{
		lat		: 	53.5510846, 
		lng		: 	9.9936819,
		city	: 	'Hamburg',
		marker	:	'/images/icon_marker_blue.svg'
	},{
		lat		: 	53.0792962, 
		lng		: 	8.8016936,
		city	: 	'Bremen',
		marker	:	'/images/icon_marker_turkis.svg'
	},{
		lat		: 	48.1351253, 
		lng		: 	11.5819805,
		city	: 	'München',
		marker	:	'/images/icon_marker_red.svg'
	},{
		lat		: 	58.487952, 
		lng		: 	19.863281,
		city	: 	'Ostsee',
		marker	:	'/images/icon_marker_green.svg'
	},{
		lat		: 	51.75, 
		lng		: 	10.633333,
		city	: 	'Harz',
		marker	:	'/images/icon_marker_purple.svg'
	}
];</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_b880222a4520a4f62ef0b234502e9d7a" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h3>Infowindow definieren</h3>
<p>Vorab müssen wir noch das Infowindow definieren, ansonsten würden wir bei einem Klick auf einen der Marker die folgende Fehlermeldung in der Konsole erhalten: <code>infowindow is not defined</code>.</p>
</article>		<div id="code-block_b880222a4520a4f62ef0b234502e9d7a" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">var infowindow		=	new google.maps.InfoWindow();</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_a5b2cadfd88b9486f10ebd09385a6165" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h3>Array auslesen</h3>
<p>Im nächsten Schritt nutzen wir die for-Schleife um die <strong>multiplen Marker auf die Google Maps</strong> hinzuzufügen. Dazu zählen wir so lange hoch, bis i größer als die Array-Länge der Variablen locations ist.</p>
<p>Um die Marker besser auseinander zu halten habe ich den Markern unterschiedliche Icons zugewiesen. Wie das geht könnt Ihr in meinem Artikel: <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-eigenen-marker-individuell-stylen/">Google Maps API &#8211; eigenen Marker individuell stylen</a> nachlesen.</p>
</article>		<div id="code-block_a5b2cadfd88b9486f10ebd09385a6165" class="codeblock">
			<div class="code-language">php</div>
			<pre>
				<code class="language-php">for (i = 0; i &lt; locations.length; i++) { 
	marker = new google.maps.Marker({
		position	:	new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
		map			:	map
	});
	
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
		return function() {
			infowindow.setContent('&lt;h3&gt;' + locations[i]['city'] + '&lt;/h3&gt;');
			infowindow.open(map, marker);
		}
	})(marker, i));
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_9c718dc165b79d488e67bd3a33e22da6" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h2>Google Maps mit mehreren Marker und Infowindow &#8211; Beispiel</h2>
<p>Wer, so wie ich manchmal auch, einfach nur alles überflogen hat und einen kompletten Code-Schnipsel sucht, für den habe ich alles noch einmal zusammengefasst.</p>
</article>		<div id="code-block_9c718dc165b79d488e67bd3a33e22da6" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">function initMap() {
		
	var myLatLng = {
		lat			:	52.520008,
		lng			:	13.404954
	};
	var mapOptions		=	{
		zoom			:	5,
		mapTypeControl	:	false,
		center			:	myLatLng,
	};
	
	map = new google.maps.Map(document.getElementById('map'), mapOptions);
	
	var locations		=	new Array();							
	var locations		=	[
		{
			lat		: 	51.0504088, 
			lng		:	13.7372621,
			city	:	'Dresden',
			marker	:	'/images/icon_marker_orange.svg'
		},{
			lat		: 	53.5510846, 
			lng		: 	9.9936819,
			city	: 	'Hamburg',
			marker	:	'/images/icon_marker_blue.svg'
		},{
			lat		: 	53.0792962, 
			lng		: 	8.8016936,
			city	: 	'Bremen',
			marker	:	'/images/icon_marker_turkis.svg'
		},{
			lat		: 	48.1351253, 
			lng		: 	11.5819805,
			city	: 	'München',
			marker	:	'/images/icon_marker_red.svg'
		},{
			lat		: 	58.487952, 
			lng		: 	19.863281,
			city	: 	'Ostsee',
			marker	:	'/images/icon_marker_green.svg'
		},{
			lat		: 	51.75, 
			lng		: 	10.633333,
			city	: 	'Harz',
			marker	:	'/images/icon_marker_purple.svg'
		}
	];
	
	var infowindow		=	new google.maps.InfoWindow();
	
	for (i = 0; i &lt; locations.length; i++) { 
		marker = new google.maps.Marker({
			position	:	new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
			map			:	map,
			animation	:	google.maps.Animation.DROP,
			icon		:	new google.maps.MarkerImage( locations[i]['marker'], null, null, null, new google.maps.Size(24, 24) ),
		});
		
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent('&lt;h3&gt;' + locations[i]['city'] + '&lt;/h3&gt;');
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>
<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/">Google Maps API &#8211; Karte mit mehreren Marker und Infowindow</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Google Maps API &#8211; eigenen Marker individuell stylen</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-eigenen-marker-individuell-stylen/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-eigenen-marker-individuell-stylen/#respond</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Fri, 16 Nov 2018 02:01:08 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1443</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-eigenen-marker-individuell-stylen/">Google Maps API &#8211; eigenen Marker individuell stylen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[<section id="block_45d52e8dcefc5eef22776d8a0d254c98" class="revilodesign demo">
	<div class="content">
				
		<div id="map"></div>

	
<script>
  function initMap() {
    
    var myLatLng = {
      lat			:	52.520008,
      lng			:	13.404954
    };
      
    var map		=	new google.maps.Map(document.getElementById('map'), {
      zoom		:	14,
      center		:	myLatLng,
      styles		:	
	[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8ec3b9"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1a3646"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#64779e"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#334e87"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6f9ba5"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3C7680"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#304a7d"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2c6675"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#255763"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#b0d5ce"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "road.local",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3a4762"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#0e1626"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e6d70"
      }
    ]
  }
]    });
    
    var marker	=	new google.maps.Marker({
      position	:	myLatLng,
      map			:	map,
      animation	:	google.maps.Animation.DROP,
      icon		:	new google.maps.MarkerImage( 'https://www.revilodesign.de/wp-content/themes/revilodesign/assets/images/icon_pin.svg', null, null, null, new google.maps.Size(30,30) )
    });
  }
</script>

		
	</div>
</section>




<section id="block_0bb7f0f14a821bdae9326ebc9b540794" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image"><picture class="aligncenter vector"><img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/icon_pin.svg" alt="icon pin" width="0" height="0"></picture></span></span></p>
	</div>
</section>


<section id="block_ef0ca0baad878ba254764dc4ba534ed1" class="revilodesign code">
	<div class="content">
		<p><small>Freepik: flaticon.com</small></p>
<h2>Einbinden des individuellen Google Maps Marker</h2>
<p>Nun müsst Ihr eigentlich nur noch euren <strong>eigenen Google Maps Marker</strong> in Euren Code auf der Webseite einbinden.</p>
		<div id="code-block_ef0ca0baad878ba254764dc4ba534ed1" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">var marker	=	new google.maps.Marker({
	position	:	myLatLng,
	map			:	map,
	animation	:	google.maps.Animation.DROP,
	icon		:	new google.maps.MarkerImage( '/images/icon_pin.svg', null, null, null, new google.maps.Size(30,30) )
});</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-eigenen-marker-individuell-stylen/">Google Maps API &#8211; eigenen Marker individuell stylen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-eigenen-marker-individuell-stylen/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Google Maps API &#8211; Design der Karte individuell anpassen</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-design-individuell-anpassen/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-design-individuell-anpassen/#comments</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Thu, 15 Nov 2018 04:24:31 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1433</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-design-individuell-anpassen/">Google Maps API &#8211; Design der Karte individuell anpassen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[<section id="block_ff17523c2162e56e33b4e4b23293e0fa" class="revilodesign demo">
	<div class="content">
		<article class="article-content"><p>Das <strong>Google Maps Karten Design anpassen</strong> gehört zu jeder guten Kür dazu, wenn es heißt eine individuelle Webseite zu erstellen und gestalten, die sich möglichst in vielen Punkten von der Konkurrenz abhebt. Dazu zählt auch <strong>die individuelle Gestaltung der Google Maps</strong> &#8211; Weg vom öden &#038; bekannten Look and Feel &#8211; Hin zum einzigartigen Hingucker.</p>
<h2>Individuelles Google Map Design &#8211; So funktioniert&#8217;s</h2>
</article>		
		<div id="map"></div>

<script>
	function initMap() {
  var myLatLng = {
    lat			:	52.520008,
    lng			:	13.404954
  };

var map		=	new google.maps.Map(document.getElementById('map'), {
zoom		:	4,
center		:	myLatLng,
styles		:	
	[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8ec3b9"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1a3646"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#64779e"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#334e87"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6f9ba5"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3C7680"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#304a7d"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2c6675"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#255763"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#b0d5ce"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "road.local",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3a4762"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#0e1626"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e6d70"
      }
    ]
  }
]});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwHvgZdIJwDdFv2O4TwfXuYLp8bSq4fpQ&callback=initMap"></script>		
	</div>
</section>


<section id="block_253cdef5694ebe447d8c168c669d412b" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>Es gibt zahlreiche Webseiten im Internet, die einem dabei helfen <strong>ein individuelles Design für die Google Map zu erstellen</strong> und Ihr werdet sicherlich sehr schnell feststellen, dass die farblichen Einstellungen sehr umfangreich sind. Es kann also auch ein bisschen dauern, bis <strong>das eigene Google Maps Layout</strong> steht und gefällt.</p>
<p>Eine Seite, die mir sehr gut gefällt um meine Google Maps anzupassen ist diese <a href="https://mapstyle.withgoogle.com/" rel="nofollow" target="_blank" title="https://mapstyle.withgoogle.com/">hier</a>. Hier habt Ihr viele Einstellungsmöglichkeiten und könnt Eure Google Map nach Herzenslust gestalten.</p>
<p>Nachdem Ihr euer Google Maps angepasst habt könnt Ihr den Json-Code in Eure App oder in Euren Webseiten Code eingeben. Ich speicher <strong>meine individuellen Google Maps Sytels</strong> in einer globalen Variable ab, damit ich bei einer Änderung nur eine Stelle bearbeiten muss und nicht mehrere.</p>
</article>		<div id="code-block_253cdef5694ebe447d8c168c669d412b" class="codeblock">
			<div class="code-language">php</div>
			<pre>
				<code class="language-php">$mapStyles	=	'
	[
  {
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#1d2c4d&quot
      }
    ]
  },
  {
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#8ec3b9&quot
      }
    ]
  },
  {
    &quotelementType&quot: &quotlabels.text.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#1a3646&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotadministrative&quot,
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotadministrative.country&quot,
    &quotelementType&quot: &quotgeometry.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#4b6878&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotadministrative.land_parcel&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotadministrative.land_parcel&quot,
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#64779e&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotadministrative.neighborhood&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotadministrative.province&quot,
    &quotelementType&quot: &quotgeometry.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#4b6878&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotlandscape.man_made&quot,
    &quotelementType&quot: &quotgeometry.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#334e87&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotlandscape.natural&quot,
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#023e58&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotpoi&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotpoi&quot,
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#283d6a&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotpoi&quot,
    &quotelementType&quot: &quotlabels.text&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotpoi&quot,
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#6f9ba5&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotpoi&quot,
    &quotelementType&quot: &quotlabels.text.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#1d2c4d&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotpoi.park&quot,
    &quotelementType&quot: &quotgeometry.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#023e58&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotpoi.park&quot,
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#3C7680&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad&quot,
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#304a7d&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad&quot,
    &quotelementType&quot: &quotlabels&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad&quot,
    &quotelementType&quot: &quotlabels.icon&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad&quot,
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#98a5be&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad&quot,
    &quotelementType&quot: &quotlabels.text.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#1d2c4d&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad.arterial&quot,
    &quotelementType&quot: &quotlabels&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad.highway&quot,
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#2c6675&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad.highway&quot,
    &quotelementType&quot: &quotgeometry.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#255763&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad.highway&quot,
    &quotelementType&quot: &quotlabels&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad.highway&quot,
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#b0d5ce&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad.highway&quot,
    &quotelementType&quot: &quotlabels.text.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#023e58&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotroad.local&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quottransit&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quottransit&quot,
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#98a5be&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quottransit&quot,
    &quotelementType&quot: &quotlabels.text.stroke&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#1d2c4d&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quottransit.line&quot,
    &quotelementType&quot: &quotgeometry.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#283d6a&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quottransit.station&quot,
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#3a4762&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotwater&quot,
    &quotelementType&quot: &quotgeometry&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#0e1626&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotwater&quot,
    &quotelementType&quot: &quotlabels.text&quot,
    &quotstylers&quot: [
      {
        &quotvisibility&quot: &quotoff&quot
      }
    ]
  },
  {
    &quotfeatureType&quot: &quotwater&quot,
    &quotelementType&quot: &quotlabels.text.fill&quot,
    &quotstylers&quot: [
      {
        &quotcolor&quot: &quot#4e6d70&quot
      }
    ]
  }
]';</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_a0a45df00567e467287f6bc832066df0" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>Anschließend rufe ich die Styles nur noch ab und die Google Maps erstrahlt im eigenen Design.</p>
</article>		<div id="code-block_a0a45df00567e467287f6bc832066df0" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">function initMap() {
	var myLatLng = {
		lat			:	52.520008,
		lng			:	13.404954
	};
	var map		=	new google.maps.Map(document.getElementById('map'), {
		zoom		:	4,
		center		:	myLatLng,
		styles		:	&lt;?php echo $mapStyles; ?&gt;
	});
}
</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


	<section id="block_283cd9c18c8d6598da6b884f18e33d50" class="revilodesign revilodesign-text text section-3 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><p><strong>Hinweis:</strong> Entfernt einfach die Striche an der Stelle wo die styles abgerufen werden!</p>
</article>				</div>
							</div>
		</div>
			</section>
<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-design-individuell-anpassen/">Google Maps API &#8211; Design der Karte individuell anpassen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-design-individuell-anpassen/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Google Maps API &#8211; Einfacher Marker mit Infowindow hinzufügen</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-einfacher-marker-mit-infowindow-hinzufuegen/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-einfacher-marker-mit-infowindow-hinzufuegen/#respond</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Wed, 14 Nov 2018 07:46:10 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1406</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-einfacher-marker-mit-infowindow-hinzufuegen/">Google Maps API &#8211; Einfacher Marker mit Infowindow hinzufügen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[<section id="block_46a9f5365ba5fd05a8c12342c06ca097" class="revilodesign demo">
	<div class="content">
		<article class="article-content"><p>Eine <strong>eigene Google Maps Karte mit einem Marker und einem Infowindow</strong> in die eigene Webseite einzubauen ist gar nicht so schwer. Ihr müsst Euch zunächst eine <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/">Google Maps API erstellen</a> und schon kann es losgehen. In dieser kleinen Anleitung zeige ich euch wie Ihr einen einfachen Marker mit einem Infowindow der Google Maps hinzufügen könnt. Am Ende soll es in etwa so aussehen:</p>
</article>		
		<div id="map"></div>

<script>
function initMap() {
	
	var myLatLng = {
		lat			:	52.520008,
		lng			:	13.404954
	};
		
	var map		=	new google.maps.Map(document.getElementById('map'), {
		zoom		:	4,
		center		:	myLatLng
	});
	
	var marker	=	new google.maps.Marker({
		position	:	myLatLng,
		map			:	map
	});
	
	// INFOWINDOW
	
	var contentString = '<h4>Berlin</h4><ul><li><strong>Postleitzahlen:</strong> 10115–14199</li><li><strong>Vorwahl:</strong> 030</li><li><strong>Kfz-Kennzeichen:</strong> B</li><li><strong>Bruttoinlandsprodukt:</strong> 136,6 Mrd. € (2017)</li><li><strong>BIP pro Kopf:</strong> 38.032 € (2017)</li><li><strong>Schulden:</strong> 55,3 Mrd. € (31. Juni 2018)</li></ul><p>Quelle: <a href="https://de.wikipedia.org/wiki/Berlin" target="_blank">Wikipedia.de</a></p>';
	
	var infowindow = new google.maps.InfoWindow({
		content		:	contentString
	});
	
	marker.addListener('click', function() {
		infowindow.open(map, marker);
	});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwHvgZdIJwDdFv2O4TwfXuYLp8bSq4fpQ&callback=initMap"></script>		
	</div>
</section>


<section id="block_2539bb1bf0031c5057d2d547a177d482" class="revilodesign code">
	<div class="content">
		<article class="article-content"><div class="header"><h2 id="erstellen-der-google-maps-karte" class="headline h2 text-color">Erstellen der Google Maps Karte</h2></div><p>Zunächst müsst Ihr eich euch erst einmal ein div mit einer ID erstellen, in welches die Karte angezeigt werden soll. In meinem Beispiel hat mein div die ID map.</p>
</article>		<div id="code-block_2539bb1bf0031c5057d2d547a177d482" class="codeblock">
			<div class="code-language">html</div>
			<pre>
				<code class="language-xml" data-highlighted="yes">&lt;div id=&quotmap&quot&gt;&lt;/div&gt;</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_d26326a2e954a82c1ad06871ef243c74" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>In meiner styles.css gebe ich dem div zudem eine Weite von 100% und eine Höhe von 400px. Wichtig ist zu erwähnen, dass Ihr dem div unbedingt eine Höhe geben müsst, da die Karte später automatisch mit <code>position:absolute</code> eingebunden wird. </p>
</article>		<div id="code-block_d26326a2e954a82c1ad06871ef243c74" class="codeblock">
			<div class="code-language">css</div>
			<pre>
				<code class="language-css">div#map {
	width: 100%;
	height: 400px;
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_e0826050c1140d02ecafba0af349a596" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h2>Google Maps Karte anzeigen</h2>
<p>Zunächst erstellen wir eine Google Maps Karte ohne Marker. Dazu geben wir die Latitude und die Longitude des Ortes an, den wir als Mittelpunkt (center) der Karte haben wollen. In meinem Fall sind es die Latitude &#038; Longitude von Berlin. </p>
<blockquote>
<p><strong>Tipp:</strong> <a href="https://www.revilodesign.de/tools/google-maps-latitude-longitude-finder/">Mit meinem Latitude und Longitude Finder</a> könnt Ihr Euch einfach und schnell die Lat und Lng Eures Ortes suchen.</p>
</blockquote>
<p>Im zweiten Schritt sagen wir:</p>
<ul>
<li>in welchem div die Karte schlussendlich angezeigt werden soll,</li>
<li>wie weit in die Karte reingezoomt werden soll und</li>
<li>welche Latitude und Longitude den Mittelpunkt der Karte sind.</li>
</ul>
</article>		<div id="code-block_e0826050c1140d02ecafba0af349a596" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">var myLatLng = {
	lat	:	52.520008,
	lng	:	13.404954
};
	
var map		=	new google.maps.Map(document.getElementById('map'), {
	zoom: 4,
	center: myLatLng
});</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_53d4c2e7ca827fa8c9236a962cfa7891" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image"><span class="text bottom left inside">Das Ergebnis würde in etwa so aussehen:</span>
		<picture class="aligncenter pixel" data-image="1414">
			<source srcset="https://www.revilodesign.de/media/google-maps-api-karte-300x166.webp" type="image/webp" media="(max-width: 300px)" width="300" height="166"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-300x166.png" type="image/png" media="(max-width: 300px)" width="300" height="166"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-150x150.png" type="image/png" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-400x221.webp" type="image/webp" media="(max-width: 400px)" width="400" height="221"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-400x221.png" type="image/png" media="(max-width: 400px)" width="400" height="221"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-500x276.webp" type="image/webp" media="(max-width: 500px)" width="500" height="276"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-500x276.png" type="image/png" media="(max-width: 500px)" width="500" height="276"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-600x331.webp" type="image/webp" media="(max-width: 600px)" width="600" height="331"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-600x331.png" type="image/png" media="(max-width: 600px)" width="600" height="331"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-700x387.webp" type="image/webp" media="(max-width: 700px)" width="700" height="387"><source srcset="https://www.revilodesign.de/media/google-maps-api-karte-700x387.png" type="image/png" media="(max-width: 700px)" width="700" height="387">
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-maps-api-karte.webp" alt="google maps api karte" width="724" height="400" />
		</picture></span></span></p>
	</div>
</section>


<section id="block_601378bda9cc9263a42eb8825eedb70e" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h2>Erstellen eines Google Maps API Marker</h2>
<p>Im nächsten Schritt wollen wir einen <strong>Google Maps API Marker erstellen</strong>. Dazu können wir eine neue Variable mit einer anderen Latitude und Longitude erstellen oder wir nutzen, wie ich es auch gemacht habe, die Angaben aus myLatLng, der Lat &#038; Lng von Berlin. </p>
<p>Zudem sagen wir auch den Marker, in welcher Karte er später angezeigt werden soll.</p>
</article>		<div id="code-block_601378bda9cc9263a42eb8825eedb70e" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">var marker	=	new google.maps.Marker({
	position	:	myLatLng,
	map		:	map
});</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


	<section id="block_b166a400ee2b51042eb151c667342905" class="revilodesign revilodesign-text text section-4 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><p>Das Ergebnis sieht nun unserem Endergebnis (Beispiel ganz oben), schon fast ähnlich. Nur fehlt noch das Infowindow, welches sich beim Klick auf den Marker öffnet.</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_2206afff6fc5720a2bb1bbd60d469197" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1416">
			<source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-300x166.webp" type="image/webp" media="(max-width: 300px)" width="300" height="166"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-300x166.png" type="image/png" media="(max-width: 300px)" width="300" height="166"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-150x150.png" type="image/png" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-400x221.webp" type="image/webp" media="(max-width: 400px)" width="400" height="221"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-400x221.png" type="image/png" media="(max-width: 400px)" width="400" height="221"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-500x276.webp" type="image/webp" media="(max-width: 500px)" width="500" height="276"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-500x276.png" type="image/png" media="(max-width: 500px)" width="500" height="276"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-600x331.webp" type="image/webp" media="(max-width: 600px)" width="600" height="331"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-600x331.png" type="image/png" media="(max-width: 600px)" width="600" height="331"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-700x387.webp" type="image/webp" media="(max-width: 700px)" width="700" height="387"><source srcset="https://www.revilodesign.de/media/google-maps-api-simple-marker-700x387.png" type="image/png" media="(max-width: 700px)" width="700" height="387">
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-maps-api-simple-marker.webp" alt="google maps api simple marker" width="724" height="400" />
		</picture></span></span></p>
	</div>
</section>


<section id="block_02015fe6001f6e092f645e03c0fdf62f" class="revilodesign code">
	<div class="content">
		<article class="article-content"><h2>Google Maps Infowindow erstellen</h2>
<p>Im letzten Schritt wollen wir das <strong>Google Maps Infowindow erstellen</strong>. Dazu erstellen wir eine Variable, in welcher wir den Inhalt speichern, welcher später im Infowindow angezeigt werden soll. </p>
<p><strong>Hinweis:</strong> Die Api meckert, wenn nicht alles hintereinander geschrieben wird. Ist leider nicht so übersichtlich.</p>
<p>Anschließend wird das infowindow als neue <code>google.maps.InfoWindow</code> erstellt und dem content wird unser zuvor erstellter contentString übergeben.</p>
<p>Im letzten Schritt sagen wir dem <code>marker.addListener</code>, dass er beim Klick auf den Marker das Infowindow öffnen soll.</p>
</article>		<div id="code-block_02015fe6001f6e092f645e03c0fdf62f" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">var contentString = '&lt;h4&gt;Berlin&lt;/h4&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Postleitzahlen:&lt;/strong&gt; 10115–14199&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Vorwahl:&lt;/strong&gt; 030&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Kfz-Kennzeichen:&lt;/strong&gt; B&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Bruttoinlandsprodukt:&lt;/strong&gt; 136,6 Mrd. € (2017)&lt;/li&gt;&lt;li&gt;&lt;strong&gt;BIP pro Kopf:&lt;/strong&gt; 38.032 € (2017)&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Schulden:&lt;/strong&gt; 55,3 Mrd. € (31. Juni 2018)&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;Quelle: &lt;a href=&quothttps://de.wikipedia.org/wiki/Berlin&quot target=&quot_blank&quot&gt;Wikipedia.de&lt;/a&gt;&lt;/p&gt;';
		
var infowindow = new google.maps.InfoWindow({
	content		:	contentString
});
		
marker.addListener('click', function() {
	infowindow.open(map, marker);
});</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_a341f4bbdc344d58d789e00e9a899880" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>Nun sollte Eure Karte wie meine Karte, ganz oben auf dieser Seite, aussehen.</p>
<h3>Zur Übersicht &#8211; der komplette Code auf einen Blick</h3>
</article>		<div id="code-block_a341f4bbdc344d58d789e00e9a899880" class="codeblock">
			<div class="code-language">plaintext</div>
			<pre>
				<code class="language-plaintext" data-highlighted="yes">&lt;div id=&quotmap&quot&gt;&lt;/div&gt;

&lt;script&gt;
function initMap() {
	
	var myLatLng = {
		lat			:	52.520008,
		lng			:	13.404954
	};
		
	var map		=	new google.maps.Map(document.getElementById('map'), {
		zoom		:	4,
		center		:	myLatLng
	});
	
	var marker	=	new google.maps.Marker({
		position	:	myLatLng,
		map			:	map
	});
	
	// INFOWINDOW
	
	var contentString = '&lt;h4&gt;Berlin&lt;/h4&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Postleitzahlen:&lt;/strong&gt; 10115–14199&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Vorwahl:&lt;/strong&gt; 030&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Kfz-Kennzeichen:&lt;/strong&gt; B&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Bruttoinlandsprodukt:&lt;/strong&gt; 136,6 Mrd. € (2017)&lt;/li&gt;&lt;li&gt;&lt;strong&gt;BIP pro Kopf:&lt;/strong&gt; 38.032 € (2017)&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Schulden:&lt;/strong&gt; 55,3 Mrd. € (31. Juni 2018)&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;Quelle: &lt;a href=&quothttps://de.wikipedia.org/wiki/Berlin&quot target=&quot_blank&quot&gt;Wikipedia.de&lt;/a&gt;&lt;/p&gt;';
	
	var infowindow = new google.maps.InfoWindow({
		content		:	contentString
	});
	
	marker.addListener('click', function() {
		infowindow.open(map, marker);
	});
}
&lt;/script&gt;</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>
<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-einfacher-marker-mit-infowindow-hinzufuegen/">Google Maps API &#8211; Einfacher Marker mit Infowindow hinzufügen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-einfacher-marker-mit-infowindow-hinzufuegen/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Google Maps API Key erstellen</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/#comments</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Tue, 13 Nov 2018 11:21:43 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1375</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/">Google Maps API Key erstellen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[	<section id="block_c4155f67a4b3144e9645f99a15ff1e97" class="revilodesign revilodesign-text text section-5 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><p>Es gibt verschiedene Gründe, wieso man die <strong>Google Maps API auf seiner Webseite einbinden möchte</strong>. In den meisten Fällen dann, wenn man Standorte von Unternehmen, Lokalen oder die Standorte der eigenen Stores auf einer Karte individuell darstellen möchte. Doch egal aus welchen Grund &#8211; Man benötigt dazu die Google Maps API. Und genau darum geht es in diesem Artikel und um die Frage &#8230;</p>
<h2>Wie erstelle ich mir eine Google Map API?</h2>
<p>Zunächst einmal müsst Ihr <a href="https://cloud.google.com/maps-platform/?hl=de" rel="noopener" target="_blank" title="google maps api erstellen">diese Seite besuchen</a>. Dort klickt Ihr auf den blauen Button mit der Aufschrift &#8222;Jetzt starten&#8220; und beginnt mit der Erstellung des eigenen API Key.</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_91df8b81c68084bc5b9a2ad812eb8699" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1386">
			
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-api-start.webp" alt="google api start" width="134" height="44" />
		</picture></span></span></p>
	</div>
</section>


	<section id="block_d68ceac1a3dd7b2311c75efc7a1aa6d4" class="revilodesign revilodesign-text text section-6 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><h3>Google Maps Plattformen aktivieren</h3>
<p>Als erstes müsst ihr entscheiden, welche Produkte Ihr für Euer Projekt benötigt. Zur Auswahl stehen:</p>
<ul>
<li><strong>Maps:</strong> Einfache Karten einbinden</li>
<li><strong>Routes:</strong> Routen von A nach B anzeigen</li>
<li><strong>Places:</strong> Zeigt Lokale, Tankstellen, Museen usw.</li>
</ul>
<p>In meinem Fall habe ich alle ausgewählt, da ich für meine Arbeit alle Produkte der Google Maps Api benötige.</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_c56cf38b58900bae286b3563f005520b" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1387">
			<source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-300x207.webp" type="image/webp" media="(max-width: 300px)" width="300" height="207"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-300x207.png" type="image/png" media="(max-width: 300px)" width="300" height="207"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-150x150.png" type="image/png" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-400x275.webp" type="image/webp" media="(max-width: 400px)" width="400" height="275"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-400x275.png" type="image/png" media="(max-width: 400px)" width="400" height="275"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-500x344.webp" type="image/webp" media="(max-width: 500px)" width="500" height="344"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-500x344.png" type="image/png" media="(max-width: 500px)" width="500" height="344"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-600x413.webp" type="image/webp" media="(max-width: 600px)" width="600" height="413"><source srcset="https://www.revilodesign.de/media/google-maps-plattform-aktivieren-600x413.png" type="image/png" media="(max-width: 600px)" width="600" height="413">
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-maps-plattform-aktivieren.webp" alt="google maps plattform aktivieren" width="700" height="482" />
		</picture></span></span></p>
	</div>
</section>


	<section id="block_85de6359bd5bbb03bd040f96857e8174" class="revilodesign revilodesign-text text section-7 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><h3>Rechnungskonto erstellen</h3>
<p>Im nächsten Schritt müsst Ihr Euch ein Rechnungskonto erstellen. Im Grunde ist die Nutzung der <strong>Google Maps Api kostenlos</strong>, da man jeden Monat einen virtuellen Wert von $200 erhält. Nachzulesen in der <a href="https://cloud.google.com/maps-platform/pricing/?hl=de" rel="noopener" target="_blank" title="Preislisten Übersicht von Google">Preislisten Übersicht von Google</a>. Alles was den Freibetrag übersteigt wird berechnet. Aber die Kosten sind wirklich überschaubar.</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_3404cef1e949fda7646d19bd15fbd503" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1388">
			<source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-300x126.webp" type="image/webp" media="(max-width: 300px)" width="300" height="126"><source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-300x126.png" type="image/png" media="(max-width: 300px)" width="300" height="126"><source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-150x150.png" type="image/png" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-400x168.webp" type="image/webp" media="(max-width: 400px)" width="400" height="168"><source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-400x168.png" type="image/png" media="(max-width: 400px)" width="400" height="168"><source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-500x210.webp" type="image/webp" media="(max-width: 500px)" width="500" height="210"><source srcset="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen-500x210.png" type="image/png" media="(max-width: 500px)" width="500" height="210">
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-maps-api-rechnungskonto-erstellen.webp" alt="google maps api rechnungskonto erstellen" width="512" height="215" />
		</picture></span></span></p>
	</div>
</section>


	<section id="block_0de79e973987bc3b08a2a2d1e3704d0d" class="revilodesign revilodesign-text text section-8 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><div class="header"><h2 id="google-maps-api-key-erhalten-und-sicher-machen" class="headline h2 text-color">Google Maps API Key erhalten und sicher machen</h2></div><p>Nun solltet Ihr ein Pop-Up Fenster sehen, wo Euch euer Google Maps API Key angezeigt wird. Diesen könnt Ihr nun kopieren und in Eurer Seite einbinden.</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_6ac5b5fdef7a47e12315802e5203a275" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1391">
			<source srcset="https://www.revilodesign.de/media/google-maps-api-key-300x203.webp" type="image/webp" media="(max-width: 300px)" width="300" height="203"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-300x203.png" type="image/png" media="(max-width: 300px)" width="300" height="203"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-150x150.png" type="image/png" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-400x271.webp" type="image/webp" media="(max-width: 400px)" width="400" height="271"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-400x271.png" type="image/png" media="(max-width: 400px)" width="400" height="271"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-500x339.webp" type="image/webp" media="(max-width: 500px)" width="500" height="339"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-500x339.png" type="image/png" media="(max-width: 500px)" width="500" height="339">
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-maps-api-key.webp" alt="google maps api key" width="599" height="406" />
		</picture></span></span></p>
	</div>
</section>


	<section id="block_8656efdc8c85722447a0ebc87af7a55d" class="revilodesign revilodesign-text text section-9 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><p>Ihr könnt auch gerne <strong>meinen Google Maps API Key</strong> kopieren, doch dieser wird euch nicht viel nutzen, da ich Ihn &#8222;sicher&#8220; gemacht habe und auf meine Webseite eingeschränkt habe. Ihr würdet in der Fehler-Console nur folgendes sehen:</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_3734d1a2040a433389b196b3637283a0" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1425">
			<source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-300x11.webp" type="image/webp" media="(max-width: 300px)" width="300" height="11"><source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-300x11.png" type="image/png" media="(max-width: 300px)" width="300" height="11"><source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-150x19.webp" type="image/webp" media="(max-width: 150px)" width="150" height="19"><source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-150x19.png" type="image/png" media="(max-width: 150px)" width="150" height="19"><source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-400x15.webp" type="image/webp" media="(max-width: 400px)" width="400" height="15"><source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-400x15.png" type="image/png" media="(max-width: 400px)" width="400" height="15"><source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-500x18.webp" type="image/webp" media="(max-width: 500px)" width="500" height="18"><source srcset="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key-500x18.png" type="image/png" media="(max-width: 500px)" width="500" height="18">
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-maps-api-error-not-authorized-to-use-this-key.webp" alt="google maps api error not authorized to use this key" width="524" height="19" />
		</picture></span></span></p>
	</div>
</section>


	<section id="block_461a9e572571bea816abf681b0439d03" class="revilodesign revilodesign-text text section-10 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><h3>Anwendungseinschränkung der Google Maps API</h3>
<p>Damit Euer Google Maps API Key nicht missbraucht und auf anderen Seiten eigebunden wird solltet Ihr ihn <strong>unbedingt sichern!</strong> Euch stehen dazu mehrere Möglichkeiten zur Verfügung. Diese Anwendungseinschränkungen stehen euch zur Verfügung:</p>
<ul>
<li>Keine</li>
<li>HTTP-Verweis-URLs (Websites)</li>
<li>IP-Adressen (Webserver, Cronjobs usw.)</li>
<li>Android-Apps</li>
<li>iOS-Apps</li>
</ul>
<p>Ich habe mich für die Anwendungseinschränkung &#8222;HTTP-Verweis-URLs&#8220; entschieden und den Google Maps API Key auf meine Webseite revilodesign.de beschränkt.</p>
</article>				</div>
							</div>
		</div>
			</section>


<section id="block_f7241f9a39938481742d52696d5bd882" class="revilodesign image">
	<div class="content">
		<p><span class="image-wrapper"><span class="image">
		<picture class="aligncenter pixel" data-image="1392">
			<source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-300x219.webp" type="image/webp" media="(max-width: 300px)" width="300" height="219"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-300x219.png" type="image/png" media="(max-width: 300px)" width="300" height="219"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-150x150.webp" type="image/webp" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-150x150.png" type="image/png" media="(max-width: 150px)" width="150" height="150"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-400x292.webp" type="image/webp" media="(max-width: 400px)" width="400" height="292"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-400x292.png" type="image/png" media="(max-width: 400px)" width="400" height="292"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-500x364.webp" type="image/webp" media="(max-width: 500px)" width="500" height="364"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-500x364.png" type="image/png" media="(max-width: 500px)" width="500" height="364"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-600x437.webp" type="image/webp" media="(max-width: 600px)" width="600" height="437"><source srcset="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen-600x437.png" type="image/png" media="(max-width: 600px)" width="600" height="437">
			<img loading="lazy" decoding="async" src="https://www.revilodesign.de/media/google-maps-api-key-anwendungseinschraenkungen.webp" alt="google maps api key anwendungseinschränkungen" width="642" height="468" />
		</picture></span></span></p>
	</div>
</section>


<section id="block_53e8a3df30711ae448a1568e97fb4168" class="revilodesign code">
	<div class="content">
		<article class="article-content"><p>Man kann diese Einschränkungen im späteren Verlauf auch erweitern oder ändern.</p>
<h2>Google Maps API Key in der eigenen Webseite einbinden</h2>
<p>Nun, da Ihr wisst, <strong>wie man einen Google Maps API generiert</strong> könnt Ihr diesen auf Eurer Webseite einbinden. </p>
</article>		<div id="code-block_53e8a3df30711ae448a1568e97fb4168" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript"> &lt;script async defer src=&quothttps://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&quot type=&quottext/javascript&quot&gt;&lt;/script&gt;</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


	<section id="block_aa65b38fcf828d443450616590937ae3" class="revilodesign revilodesign-text text section-11 bg-color-white section-width-full section-height-auto content-width-content content-align-left text-align-left">
		<div class="content">
			<div class="flex alignCenter">
								<div class="flexbox text right asset-type-empty">
					<article class="article-content"><p>Tauscht dazu einfach &#8222;YOUR_API_KEY&#8220; mit Euren Key.</p>
<blockquote>
<p><strong>Hinweis:</strong> Eure Webseite <u>muss</u> ein SSL Zertifikat eingebunden haben, da die Google Maps API nur mit der SSL Verschlüsselung funktioniert. </p>
</blockquote>
</article>				</div>
							</div>
		</div>
			</section>
<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/">Google Maps API Key erstellen</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Google Map API &#8211; Geocoding &#8211; Adresse anstelle von Latitude und Longitude</title>
		<link>https://www.revilodesign.de/blog/google-maps-api/geocoding-adresse-anstelle-von-latitude-und-longitude/</link>
					<comments>https://www.revilodesign.de/blog/google-maps-api/geocoding-adresse-anstelle-von-latitude-und-longitude/#comments</comments>
		
		<dc:creator><![CDATA[Oliver Götze]]></dc:creator>
		<pubDate>Thu, 22 Nov 2018 07:37:14 +0000</pubDate>
				<category><![CDATA[Google Maps API]]></category>
		<guid isPermaLink="false">https://www.revilodesign.de/?p=1189</guid>

					<description><![CDATA[<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/geocoding-adresse-anstelle-von-latitude-und-longitude/">Google Map API &#8211; Geocoding &#8211; Adresse anstelle von Latitude und Longitude</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></description>
										<content:encoded><![CDATA[<section id="block_759e0373864a1c9fad4096e7f75fb07f" class="revilodesign demo">
	<div class="content">
				
		<div id="finder">
	<div id="finder-search" class="flex">
		<div class="flexbox">
			<input id="address" type="text" />
		</div>
		<div class="flexbox flexbox-auto">
			<div class="buttons"><div id="find" class="btn " >
								<span class="btn-before"><svg width="254" height="392" viewBox="0 0 254 392" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M0 57.647C0 25.8095 25.8095 0 57.647 0C89.4846 0 115.294 25.8095 115.294 57.647C115.294 89.4846 89.4846 115.294 57.647 115.294C25.8095 115.294 0 89.4846 0 57.647Z" fill="#121212"></path>
								<path d="M138.353 196C138.353 164.163 164.163 138.353 196 138.353C227.838 138.353 253.647 164.163 253.647 196C253.647 227.838 227.838 253.647 196 253.647C164.163 253.647 138.353 227.838 138.353 196Z" fill="#121212"></path>
								<path d="M0 334.353C0 302.516 25.8095 276.706 57.647 276.706C89.4846 276.706 115.294 302.516 115.294 334.353C115.294 366.191 89.4846 392 57.647 392C25.8095 392 0 366.191 0 334.353Z" fill="#121212"></path>
							</svg></span>
								<span class="btn-text">Geocoding
									<span class="btn-after"><svg width="254" height="392" viewBox="0 0 254 392" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M0 57.647C0 25.8095 25.8095 0 57.647 0C89.4846 0 115.294 25.8095 115.294 57.647C115.294 89.4846 89.4846 115.294 57.647 115.294C25.8095 115.294 0 89.4846 0 57.647Z" fill="#121212"></path>
								<path d="M138.353 196C138.353 164.163 164.163 138.353 196 138.353C227.838 138.353 253.647 164.163 253.647 196C253.647 227.838 227.838 253.647 196 253.647C164.163 253.647 138.353 227.838 138.353 196Z" fill="#121212"></path>
								<path d="M0 334.353C0 302.516 25.8095 276.706 57.647 276.706C89.4846 276.706 115.294 302.516 115.294 334.353C115.294 366.191 89.4846 392 57.647 392C25.8095 392 0 366.191 0 334.353Z" fill="#121212"></path>
							</svg></span>
								</span>
							</div></div>		</div>
	</div>
	<div id="geometry"></div>
	<div id="map"></div>
	<div id="datas"></div>
</div>
<script>
	function initAutocomplete() {
	
		var markers = [];

		autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')),{
			types: ['geocode']
		});
		
		var myLatLng = {
			lat			:	52.520008,
			lng			:	13.404954
		};
			
		var map		=	new google.maps.Map(document.getElementById('map'), {
			zoom		:	2,
			center		:	myLatLng
		});
		
		
		// START BY CLICK
		jQuery('div#find').on('click', function() {
			LatLngSearch();			
		});
		
		// START BY PRESS ENTER
		jQuery('#address').bind("enterKey",function(e){
			LatLngSearch();	
		});
		jQuery('#address').keyup(function(e){
			if(e.keyCode == 13) {
				LatLngSearch();
			}
		});
		
		// DELETE ALL MARKERS
		function DeleteMarkers() {
			for (var i = 0; i < markers.length; i++) {
				markers[i].setMap(null);
			}
			markers = [];
		};
				
		// SHOW LAT LNG		
		function LatLngSearch(  ) {
			
			var value			=	jQuery('input#address').val();
			
			if ( value ) {
				var request		=	$.ajax({
					url			:	"https://www.revilodesign.de/wp-content/themes/revilodesign/demos/ajax_latlon.php",
					method		:	"POST",
					data		:	{ 
										address		:	value
									},
					dataType	:	'json',
					success		:	function(result) {
						jQuery('div#datas').html('').addClass('show');
						jQuery('div#geometry').html('').addClass('show');
						jQuery('div#datas').append('<h2>Ergebnis: ' + value + '</h2>');
						if ( result['link_json'] || result['link_xml'] ) {
							jQuery('div#geometry').append('<p class="link"><strong>Geocoding API Links:</strong><br><br>');
						}
						if ( result['link_json'] ) {
							jQuery('div#geometry').append('<strong>JSON:</strong> <a href="' + result['link_json'] + '" title="open json link in new tab" target="_blank">' + result['link_json'] + '</a><hr>');
						}
						if ( result['link_xml'] ) {
							jQuery('div#geometry').append('<strong>XML:</strong> <a href="' + result['link_xml'] + '" title="open xml link in new tab" target="_blank">' + result['link_xml'] + '</a>');
						}
						if ( result['link_json'] || result['link_xml'] ) {
							jQuery('div#geometry').append('</p>');
						}
						
						if ( result['lat'] ) {
							jQuery('div#datas').append('<p><strong>Latitude:</strong> <input readonly="" value="' + result['lat'] + '" /></p>');
						}
						if ( result['lng'] ) {
							jQuery('div#datas').append('<p><strong>Longitude:</strong> <input readonly="" value="' + result['lng'] + '" /></p>');
						}
						if ( result['gps_b'] ) {
							jQuery('div#datas').append('<p><strong>GPS Breitengrad:</strong> ' + result['gps_b'] + '</p>');
						}
						if ( result['gps_l'] ) {
							jQuery('div#datas').append('<p><strong>GPS Längengrad:</strong> ' + result['gps_l'] + '</p>');
						}
						if ( result['country'] ) {
							jQuery('div#datas').append('<p><strong>Land:</strong> ' + result['country_code'] + ' ' + result['country'] + '</p>');
						}
						if ( result['locality'] ) {
							jQuery('div#datas').append('<p><strong>Region:</strong> ' + result['locality'] + '</p>');
						}
						if ( result['street_number'] ) {
							jQuery('div#datas').append('<p><strong>Strasse / Nr:</strong> ' + result['street_name'] + ' ' + result['street_number'] + '</p>');
						}
						if ( result['postal_code'] ) {
							jQuery('div#datas').append('<p><strong>PLZ:</strong> ' + result['postal_code'] + '</p>');
						}
						if ( result['timezone'] ) {
							jQuery('div#datas').append('<p><strong>Zeitzone:</strong> ' + result['timezone'] + '</p>');
						}
						
						if ( result['lat'] && result['lng'] ) {
							DeleteMarkers();
							
							weatherApi(result['lat'], result['lng']);
							
							var searchLatLng = {
								lat			:	result['lat'],
								lng			:	result['lng']
							};
							
							// KARTE NEU POSITIONIEREN
							var map		=	new google.maps.Map(document.getElementById('map'), {
								zoom		:	14,
								center		:	searchLatLng
							});
							
							var marker = new google.maps.Marker({
								map			:	map,
								position	:	searchLatLng,
								animation	:	google.maps.Animation.DROP
				            });
				            
				            var infowindow	=	new google.maps.InfoWindow({
								content: '<strong>Lat:</strong> ' + result['lat'] + '<br><strong>Lng:</strong> ' + result['lng']
							});
							infowindow.open(map,marker);
							
							// ADD MARKER TO ARRAY
							markers.push(marker);
							
							// CLICK ON MAP
							google.maps.event.addListener(map, 'click', function(event) {
								placeMarker(map, event.latLng);
								LatLngClick( event.latLng );
							});
						}
						
					},
					error		:	function (xhr, ajaxOptions, thrownError) {
						alert(xhr.status);
						alert(thrownError);
					}
				});
			}
		}
	}
	
	// WEATHER
	function weatherApi ( lat , lng ) {
		// API URL
		// https://api.openweathermap.org/data/2.5/weather?lat=50.508651&lon=11.9053201&units=metric&APPID=2b2b2817a56f2bbd9b1267cc202a6ba3
		var apiUrl				=	'https://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lng + '&units=metric&lang=de&APPID=2b2b2817a56f2bbd9b1267cc202a6ba3';
	
		// WETTER API
		jQuery.ajax ({
			url: apiUrl,
			type: 'GET',
			dataType: 'jsonp',
			success: function(data) {
				
				// WETTER
				var weatherMain			=	data.weather[0].description;
				var weatherIcon			=	'<span class="weather"><img decoding="async" src="https://openweathermap.org/img/w/' + data.weather[0].icon + '.png" /></span>';
				
				// TEMP
				var mainTemp			=	Number( data.main.temp.toFixed(2) );
				var mainTempMin			=	data.main.temp_min;
				var mainTempMax			=	data.main.temp_max;
				
				if ( data.main.temp != data.main.temp_min && data.main.temp != data.main.temp_max ) {
					var	showTemp		=	data.main.temp + '° <small>(min: ' + data.main.temp_min + '° / max: ' + data.main.temp_max + '° )</small>';
				} else {
					var	showTemp		=	data.main.temp + '°';
				}
				
				var	showWeather			=	'' + weatherMain + ' ' + weatherIcon + '';
				
				jQuery('div#datas').append( '<p><strong>Wetter:</strong> ' + showWeather + '</p>' );
				jQuery('div#datas').append( '<p><strong>Temperatur:</strong> ' + showTemp + '</p>' );
			}
			
		});
	}
	
</script>
		
	</div>
</section>


<section id="block_9a80092bb2b2730adbd80cbeece59ca4" class="revilodesign code">
	<div class="content">
		<p>Ihr könnt es euch einfach machen und die gesuchte Adresse oben in das Suchfeld eingeben. Anschließend erhaltet Ihr den <strong>Geocoding API Link</strong> welcher die Informationen in JSON zum Ort beinhaltet.</p>
<p><strong>Beispiel:</strong> <a href="https://maps.googleapis.com/maps/api/geocode/json?address=alexanderplatz-berlin-deutschland&key=YOUR_API_KEY" title="open json link in new tab" target="_blank">https://maps.googleapis.com/maps/api/geocode/json?address=alexanderplatz-berlin-deutschland&key=<code>YOUR_API_KEY</code></a></p>
<blockquote><p><strong>Hinweis:</strong> Ihr müsst zuvor <a href="https://www.revilodesign.de/blog/google-maps-api/google-maps-api-erstellen/">einen Google Maps API Key erstellen</a> und diesen mit "<code>YOUR_API_KEY</code>" austauschen, ansonsten funktioniert der Link nicht und wirft nur eine Fehlermeldung: "<em>The provided API key is invalid.</em>"</p></blockquote>
<p>Wenn Ihr euren Key eingefügt habt, solltet Ihr die entsprechenden Daten in JSON Format erhalten. Alternativ könnt Ihr Euch die Daten auch in XML Format ausgeben lassen. Tauscht dazu im link das Wort "json" mit "xml" - Der Rest bleibt identisch.</p>
<p><strong>Die Ausgabe sollte dann so aussehen:</strong></p>
		<div id="code-block_9a80092bb2b2730adbd80cbeece59ca4" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">{
   &quotresults&quot : [
      {
         &quotaddress_components&quot : [
            {
               &quotlong_name&quot : &quotBerlin&quot,
               &quotshort_name&quot : &quotBerlin&quot,
               &quottypes&quot : [ &quotlocality&quot, &quotpolitical&quot ]
            },
            {
               &quotlong_name&quot : &quotMitte&quot,
               &quotshort_name&quot : &quotMitte&quot,
               &quottypes&quot : [ &quotpolitical&quot, &quotsublocality&quot, &quotsublocality_level_1&quot ]
            },
            {
               &quotlong_name&quot : &quotBerlin&quot,
               &quotshort_name&quot : &quotBerlin&quot,
               &quottypes&quot : [ &quotadministrative_area_level_1&quot, &quotpolitical&quot ]
            },
            {
               &quotlong_name&quot : &quotDeutschland&quot,
               &quotshort_name&quot : &quotDE&quot,
               &quottypes&quot : [ &quotcountry&quot, &quotpolitical&quot ]
            },
            {
               &quotlong_name&quot : &quot10178&quot,
               &quotshort_name&quot : &quot10178&quot,
               &quottypes&quot : [ &quotpostal_code&quot ]
            }
         ],
         &quotformatted_address&quot : &quot10178 Berlin, Deutschland&quot,
         &quotgeometry&quot : {
            &quotlocation&quot : {
               &quotlat&quot : 52.5219184,
               &quotlng&quot : 13.4132147
            },
            &quotlocation_type&quot : &quotGEOMETRIC_CENTER&quot,
            &quotviewport&quot : {
               &quotnortheast&quot : {
                  &quotlat&quot : 52.52326738029149,
                  &quotlng&quot : 13.4145636802915
               },
               &quotsouthwest&quot : {
                  &quotlat&quot : 52.52056941970849,
                  &quotlng&quot : 13.4118657197085
               }
            }
         },
         &quotplace_id&quot : &quotChIJbygR2x5OqEcRbhbkZsMB_DA&quot,
         &quottypes&quot : [ &quotestablishment&quot, &quotpoint_of_interest&quot ]
      }
   ],
   &quotstatus&quot : &quotOK&quot
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_d1573d7f78ebbc6c435802ba512cf0a7" class="revilodesign code">
	<div class="content">
		<h2>Google Maps Geocoding Beispiel mit PHP, Javascript und Ajax</h2>
<p>Im folgenden möchte ich euch an einem Beispiel zeigen, wie ihr <strong>mit PHP, Javascript und Ajax die Geocoding API</strong> von Google Maps sinnvoll nutzen könnt. Im Grunde ist es eigentlich der vereinfachte Code aus der <strong>Google Maps Geocoding Karte oben</strong> aus diesem Beitrag.</p>
<h3>HTML</h3>
<p>Als erstes benötigen wir ein Eingabefeld, einen Button und einen Bereich für die Karte. Ich habe bewusst nicht mit einer Form gearbeitet, da ich keinen reload wollte. Finde die <strong>Variante mit Ajax eleganter</strong>, auch wenn ein Input Feld ohne Form drumherum nicht WC3 konform ist.</p>
		<div id="code-block_d1573d7f78ebbc6c435802ba512cf0a7" class="codeblock">
			<div class="code-language">html</div>
			<pre>
				<code class="language-xml" data-highlighted="yes">&lt;input id=&quotaddress&quot type=&quottext&quot /&gt;
&lt;div id=&quotfind&quot&gt;Geocoding&lt;/div&gt;
&lt;div id=&quotmap&quot&gt;&lt;/div&gt;</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_9fe4f5180c3fdc5ded6cdb4cb038f05d" class="revilodesign code">
	<div class="content">
		<h3>Javascript</h3>
<p>Als nächstes bauen wir uns das Javascript zusammen. Um es den Besucher einfacher zu machen und eventuelle Tippfehler zu vermeiden binde ich noch den Autocompleter ein, der einen bei der Eingabe Adressen vorschlägt. </p>
<p>Beim Klick auf den "Button" oder bei drücken von Enter rufe ich die Funktion <code>LatLngSearch()</code> auf, die den value aus dem Input-Field ausliest. Ist der value gefüllt starte ich meine ajax.php.</p>
		<div id="code-block_9fe4f5180c3fdc5ded6cdb4cb038f05d" class="codeblock">
			<div class="code-language">javascript</div>
			<pre>
				<code class="language-javascript">function initAutocomplete() {
	
	var markers = [];

	autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')),{
		types: ['geocode']
	});
	
	var myLatLng = {
		lat			:	52.520008,
		lng			:	13.404954
	};
		
	var map		=	new google.maps.Map(document.getElementById('map'), {
		zoom		:	2,
		center		:	myLatLng
	});
	
	// START BY CLICK
	jQuery('div#find').on('click', function() {
		LatLngSearch();			
	});
	
	// START BY PRESS ENTER
	jQuery('#address').bind(&quotenterKey&quot,function(e){
		LatLngSearch();	
	});
	jQuery('#address').keyup(function(e){
		if(e.keyCode == 13) {
			LatLngSearch();
		}
	});
			
	// SHOW LAT LNG		
	function LatLngSearch(  ) {
		
		var value			=	jQuery('input#address').val();
		
		if ( value ) {
			var request		=	$.ajax({
				url			:	&quot/ajax.php&quot,
				method		:	&quotPOST&quot,
				data		:	{ 
									address		:	value
								},
				dataType	:	'json',
				success		:	function(result) {
					console.log(result);
					
					var searchLatLng = {
						lat			:	result['lat'],
						lng			:	result['lng']
					};
					
					// NEW POSITION
					var map		=	new google.maps.Map(document.getElementById('map'), {
						zoom		:	14,
						center		:	searchLatLng
					});
					
					var marker = new google.maps.Marker({
						map			:	map,
						position	:	searchLatLng,
						animation	:	google.maps.Animation.DROP
		            });
		            
		            var infowindow	=	new google.maps.InfoWindow({
						content: '&lt;strong&gt;Lat:&lt;/strong&gt; ' + result['lat'] + '&lt;br&gt;&lt;strong&gt;Lng:&lt;/strong&gt; ' + result['lng']
					});
					infowindow.open(map,marker);
					
					// ADD MARKER TO ARRAY
					markers.push(marker);
				},
				error		:	function (xhr, ajaxOptions, thrownError) {
					alert(xhr.status);
					alert(thrownError);
				}
			});
		}
	}
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_a109e414870a11b6af6859a01f940357" class="revilodesign code">
	<div class="content">
		<p>Zusätzlich müsst Ihr noch die .js einbinden:</p>
		<div id="code-block_a109e414870a11b6af6859a01f940357" class="codeblock">
			<div class="code-language">plaintext</div>
			<pre>
				<code class="language-plaintext" data-highlighted="yes">https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<section id="block_ea87c6fc495c563b4df101c3377b20dc" class="revilodesign code">
	<div class="content">
		<h3>AJAX</h3>
<p>In der ajax.php Datei prüfe ich zunächst, ob eine Adresse übermittelt wurde. Anschließend verarbeite ich die Adresse solange, bis sich keine Sonderzeichen mehr darin verstecken, wandle Umlaute um ersetze doppelte Bindestriche und Leerzeichen mit einfachen Bindestrichen. Anschließend übermittel ich der Funktion <code>file_get_contents()</code> die Adresse und decode die JSON-Daten, sodass ich damit arbeiten kann.</p>
<p>Anschließend Speicher ich die Latitude und Longitude in einem Array ab und kodiere dies wieder ins JSON-Format. Ihr könnt natürlich noch viel mehr Werte aus der Geocoding API ins Array abspeichern.</p>
		<div id="code-block_ea87c6fc495c563b4df101c3377b20dc" class="codeblock">
			<div class="code-language">php</div>
			<pre>
				<code class="language-php">if ( $_POST['address'] ) {
			
	$address			=	$_POST['address'];
	$address			=	str_replace(array('ä','ü','ö','ß'), array('ae', 'ue', 'oe', 'ss'), $address );
	$address			=	preg_replace(&quot/[^a-zA-Z0-9\_\s]/&quot, &quot&quot, $address);
	$address			=	strtolower($address);
	$address			=	str_replace( array(' ', '--'), array('-', '-'), $address );						
	$address			=	'https://maps.googleapis.com/maps/api/geocode/json?address=' . $address . '&key=YOUR_API_KEY';
				
	$json				=	file_get_contents($address);
	$obj				=	json_decode($json);	
											
	$datas['lat']		=	$obj-&gt;results[0]-&gt;geometry-&gt;location-&gt;lat;
	$datas['lng']		=	$obj-&gt;results[0]-&gt;geometry-&gt;location-&gt;lng;
		
	echo json_encode( $datas );
}</code>
			</pre>
			<div class="toggleCode" data-text="Weniger anzeigen">Mehr anzeigen</div>
		</div>
	</div>
</section>


<p>Der Beitrag <a href="https://www.revilodesign.de/blog/google-maps-api/geocoding-adresse-anstelle-von-latitude-und-longitude/">Google Map API &#8211; Geocoding &#8211; Adresse anstelle von Latitude und Longitude</a> erschien zuerst auf <a href="https://www.revilodesign.de">revilodesign</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.revilodesign.de/blog/google-maps-api/geocoding-adresse-anstelle-von-latitude-und-longitude/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
