Google Maps Shortcode mit API 3

Es gibt viele Plugins für Google Map Karten in WordPress Artikel zu Integrieren. Jedoch was tun wenn man das ganze ohne Plugin machen möchte? Abgesehen davon basieren noch viele der Plugins auf die veraltete API 2 von Google. Hier eine Möglichkeit Google Maps flexibel in Artikel und Seiten per Shortcode ein zu binden. So ist es auch möglich ohne Probleme von Google auf andere Kartendienste zu wechseln.

Füge folgenden Code-Schnipsel der functions.php deines WordPress Themes bei um Google Map Karten per Shortcode aus zu geben.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Googlemaps Integration
function gmaps_shortcode($atts, $content=null) {
    extract(shortcode_atts(array(
	'width' => '640', // Standard 640px Breite
	'height' => '340', // Standard 340px Höhe
	'zoom' => '13', // Standard Zoom
	'y' => '37.0625', // laengengrad
	'x' => '-95.677068' // breitengrad Standard Berlin
        ), $atts));
 
    ?>
    <div id="map_canvas" style="width:<?php echo $width; ?>px; height:<?php echo $height; ?>px;"></div><!-- #map_canvas -->
 
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
	var geocoder;
	var map;
 
	jQuery(document).ready(function() {
 			initialize();
			});
 
	function initialize() {
	    var latlng = new google.maps.LatLng(<?php echo $y.','.$x; ?>);
	    var myOptions = {
		zoom: <?php echo $zoom; ?>,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
	    var marker = new google.maps.Marker({
		position: latlng, 
		map: map, 
		title:"<?php echo $content; ?>"
	    });
	}
    </script> 
<?php
}
add_shortcode('karte','gmaps_shortcode');

Verwendung

[ karte x=“52.561325″ y=“13.286533″ width=“300″ height=“200″ zoom=“13″ ] wobei nur x und y angegeben werden müssen. Die Standards können geändert werden.

Autor: Kreativmonkey
Administriert mehrere WordPress Projekte und versucht mit dieser Seite eine umfangreiche Deutsche WordPress Code-Schnipsel Sammlung auf zu bauen. Durch die regelmäßige Arbeit mit WordPress und der vielen "HowTo's" die diese Arbeit begleiten sammeln sich immer mehr Code-Schnipsel an, da diese auf unterschiedlichen Plattformen zu finden sind und man nicht alles in Lesezeichen ablegen kann, werden diese Schnipsel hier notiert, mit der Quelle und ein paar Zusatzinformationen versehen und für die Allgemeinheit zur Verfügung gestellt.

50 weitere Artikel von .

Ein Kommentar

  1. Google Maps Karte einbinden ohne Plugin (API V3) › Calyrium.org
    Jul 23, 2012 @ 21:13:08

    […] Dieser Teil muss dort hin wo die Karte ausgegeben werden soll. Die größe lässt sich wie von einem Div gewohnt mit den Parametern width und height anpassen, davor und danach kann alles stehen was du willst, nur nicht in dem Div! Lösung als Shortcode: Google Maps Shortcode […]