Nachtrag 14.8.2012
Google Maps V3 funktioniert auch ohne Schlüssel für bis zu 25000 Abrufe am Tag.
Ein falscher (z.B. alter V2 Schlüssel) führt zu einem Sperren des Dienstes.
Hier ist ein Schnellbauksten mit allen Quelldateien zum Runterladen für die, die Google Maps mit eigenen Bildern und Wegmarkierungen verbessern wollen
English Summary: If You need Google Maps showing Your own markers and polylines: here is a quick assembly kit
Benötigt werden nur:
- die Bilder (Marker), die ihr anzeigen lassen wollt, am besten im png Format
- die Koordinaten für die Bilder und Strecken
- etwas Mut, ein vorhandenes JavaScript Programm zu verändern
Zunächst müßt ihr in der quickmaps.php folgende Zeile suchen und euren Google Key zwischen die Hochkommas eintragen:
$maps_text=$this->nf_enqueue('googlemaps','http://maps.google.com/maps/api/js?sensor=false&
language=de&v=3.1&key='******euer Google Key');
Die Hauptarbeit macht das (selbsterklärende 😉 ) JavaScript quickmaps_init.js:
jQuery(window).load(function () {
map_initialize();
});
function map_initialize() {
var latlng = new google.maps.LatLng(49.31681,8.43885);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image= my_param.google_img_url+'logo_passend.png';
var parkplatz= my_param.google_img_url+'parkplatz_passend.png';
var latlngparkpl = new google.maps.LatLng(49.31450,8.44450);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var markerparkpl = new google.maps.Marker({
position: latlngparkpl,
map: map,
icon: parkplatz
});
var parkplatzweg = [
new google.maps.LatLng(49.31450,8.44450),
new google.maps.LatLng(49.31500,8.44450),
new google.maps.LatLng(49.31500,8.44250),
new google.maps.LatLng(49.31600,8.44170),
new google.maps.LatLng(49.31670,8.44150),
new google.maps.LatLng(49.31650,8.43900),
new google.maps.LatLng(49.31681,8.43885)
];
var vomparkplatz = new google.maps.Polyline({
path: parkplatzweg,
strokeColor: "#FF0000",
strokeOpacity: 0.4,
strokeWeight: 2
});
var bahnhofsweg = [
new google.maps.LatLng(49.32470,8.42870),
new google.maps.LatLng(49.32340,8.42881),
new google.maps.LatLng(49.32210,8.4295),
new google.maps.LatLng(49.31900,8.431400),
new google.maps.LatLng(49.3174,8.4314),
new google.maps.LatLng(49.31728,8.43885),
new google.maps.LatLng(49.31681,8.43885)
];
var vombahnhof = new google.maps.Polyline({
path: bahnhofsweg,
strokeColor: "#0000FF",
strokeOpacity: 0.4,
strokeWeight: 2
});
vomparkplatz.setMap(map);
vombahnhof.setMap(map);
Ok, es sieht erstmal schlimm aus, aber eigentlich ist es nicht schwer.
In Zeile 7 wird ein Koordinatenobjekt erzeugt. Das wird das Zentrum der Karte und hier sitzt das Bild aus Zeile 15.
In den Zeilen 16 und 17: noch eine Koordinatenobjekt und noch ein Bild.
Alle Koordinaten in den ….. LatLng(49.31681,8.43885) müßt ihr durch eure Werte ersetzten.
Ebenso die Bilder z.B. in
my_param.google_img_url+’logo_passend.png‘;
Die Zeilen 18-27 passen die Bilder in die Karte ein, die mit der Zeile 13 erzeugt wurde.
Im Rest der Datei werden Linien definiert und angezeigt.
Am Ende vom Artikel seht ihr, wie das ganze aussieht.
Gestartet wir das Ganze dann mit einem shortcode in eurem Artikel oder auf euerer Seite (aber OHNE die Leerzeichen hinter [ und vor ] !!!!!)
[ quickmaps ]
in der Größe 700×700 Pixeln oder wenn ihr andere Kartengrößen braucht mit
[ quickmaps width=300px height=400px ]
für eine 300px x 400px Karte.
Hier könnt ihr das gesamte Plugin runterladen
und so sieht es dann aus:
