Google bietet einem die Möglichkeit das Google Map Interface mit eigenen Karten oder Bildern zu nutzen. So kann man eine eigene Karten in eine bestehende GoogleMap einsetzen oder lediglich das Interface mit einer komplett eigenen Karte nutzen. Heute zeig ich euch mal die zweite, etwas einfachere Variante.
Für das Beispiel nehmen wir ein 2,8MB großes Bild in der Größe von 1920*1080px. Im Prinzip kann man das ganze mit beliebig großen Bildern machen, auch 20.000px & 100MB große Bilder stellen keinerlei Problem dar, das Prinzip bleibt immer das selbe.
Folgende Schritte müssen durchlaufen werden:
1. Ein passendes Bild auswählen – je größer umso besser
2. Das Bild mithilfe eines Photoshop Scripts in 256x256px große Teile zerstückeln
3. Die Map erstellen
Example / Beispiel
So sieht dann unsere fertige Map aus:
Check out the Example
Das Bild zerstückeln
Mithilfe eines wirklich tollen Photoshop Scripts von Will James, Curtis Wyatt & Nate Bundy ist es ein Kinderspiel sein Bild in die benötigten 256x256px großen Teile zu speichern. Im Script müssen folgende Parameter angepasst werden:
1. HighestZoomLevel (Der höchste Zoomlevel der verwendet werden soll – für unser Beispiel 17)
2. LowestZoomLevel (Der niedrigste Zoomlevel- für unser Beispiel 15)
3. FolderPath (In diesen Ordner werden die Bilder gespeichert)
4. save JPG/savePNG/saveGIF (in welchem Bildformat sollen die Bilder ausgegeben werden – für unser Beispiel gif)
Möchte man die Karte exakt in einen vorhanden Ort der bestehenden Googlemap einbauen & platzieren, müssen auch die Variablen OrgX und OrgY angepasst werden. Die richtigen Koordinaten kann man mit folgender Seite herausbekommen. Dort kann man sein Bild hochladen & dann exakt platzieren. Für unser Beispiel spielt das keine Rolle, da wir unser Bild irgendwo auf der Welt hinstellenkönnen, wir nehmen einfach die voreingestellten Werte x y werte 31551 & 50899. Die benötigten lat/long Koordinaten dazu – die wir dann später für unsere Googlemap brauchen (damit wir unsere Karte sehen) sind in diesem Fall 37.254000 und -93.332000 bei unserem Zoomlevel von 15.
Nachdem wir die Variablen im Script angepasst haben, öffnen wir das große Bild nun in Photoshop & gehen anschließend auf Datei/Scripts/Durchsuchen und wählen unser .jsx Script aus. Nun erstellt & speicher Photoshop automatisch unsere 256×256 großen Bilder mit dem korrekten Dateinamen. In unserem Beispielbild sind das 61 Bilder.
Die Map erstellen
Nachdem wir nun unsere Bilder haben, müssen wir nur noch ein Script basteln damit Google auch unsere Bilder anzeigt.
Zuerst erstellen wir ganz gewöhnlich eine Google Map mit Zoommöglichkeiten
if (GBrowserIsCompatible()) {
//----> Generate New Map with controls
var map = new GMap2(document.getElementById("map"));
map.enableScrollWheelZoom();
map.setUIToDefault();
Nun fügen wir eine Copyrightinformation hinzu, die bei unserer Karte angezeigt werden soll. Die Koordinaten sind bereits auf unsere Karte abgestimmt.
//----> MAP Copyright
var copyright = new GCopyright(1,
new GLatLngBounds(new GLatLng(34.260000,-93.330000),new GLatLng(39.260000,-96.330000)),0, "Kollermedia.at");
//----> Add Copyright to the Map
var copyrightCollection = new GCopyrightCollection("Copyright:");
copyrightCollection.addCopyright(copyright);
Jetzt erstellen wir die passende URL für unsere Bilder. Unsere Bildnamen sind folgendermaßen abgespeichert worden: zb. 15_7887_12724.gif
Die erste Zahl ist der Zoomlevel, die zweite die x Koordinate, die dritte die y Koordinate und dann die Dateiendung. Die x Koordinate geht bei unseren gespeicherten Bildern mit dem Zoomlevel 15 von 7887 bis 7889, die y Koordinate von 12724 bis 12725. Dies von-bis Werte tragen wir nun für jeden Zoomlevel in unser Script ein.
//----> Get and Display Own Map Images
//----> Name structur = 15_7887_12724.gif (zoomlevel_xvalue_yvalue.fileextension)
CustomGetTileUrl=function(a,b){
if (b==15 && a.x>=7887 && a.x<=7889 && a.y>=12724 && a.y<= 12725){
return "img/"+b+"_"+a.x+"_"+a.y+""+".gif";
}
else if (b==16 && a.x>=15775 && a.x<=15779 && a.y>=25449 && a.y<= 25451){
return "img/"+b+"_"+a.x+"_"+a.y+""+".gif";
}
else if (b==17 && a.x>=31551 && a.x<=31558 && a.y>=50899 && a.y<= 50903){
return "img/"+b+"_"+a.x+"_"+a.y+""+".gif";
}
else {
return "img/blank.gif";
}
}
//----> Create GTileLayer and apply the CustomGetTileUrl to it
var tilelayers = [new GTileLayer(copyrightCollection,15,17)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
Nun weisen wir der Karte unsere Bilder zu. Die Variable GMercatorProjection enthält unseren höchsten Zoomlevel+1 (also in unserem Beispiel: 17+1 = 18). Anschließend Zentrieren wir die Googlemap auf unsere Koordinate, mit dem Zoomlevel 15.
//----> Apply Images to the Map var mynewmap = new GMapType(tilelayers, new GMercatorProjection(18)); //----> Center Map map.setCenter(new GLatLng(37.254000, -93.332000),15, mynewmap);
Zu guter letzt entfernen wir noch die üblichen GoogleMap Buttons, da wir diese für unsere Karte nicht benötigen
//----> Remove Map Type Buttons map.removeMapType(G_NORMAL_MAP); map.removeMapType(G_SATELLITE_MAP); map.removeMapType(G_HYBRID_MAP); } //close if browser compatible
Das komplette Script für unser Beispiel sieht also folgendermaßen aus:
<script type="text/javascript">
if (GBrowserIsCompatible()) {
//----> Generate New Map with controls
var map = new GMap2(document.getElementById("map"));
map.enableScrollWheelZoom();
map.setUIToDefault();
//----> MAP Copyright
var copyright = new GCopyright(1,
new GLatLngBounds(new GLatLng(34.260000,-93.330000),new GLatLng(39.260000,-96.330000)),0, "Kollermedia.at");
//----> Add Copyright to the Map
var copyrightCollection = new GCopyrightCollection("Copyright:");
copyrightCollection.addCopyright(copyright);
//----> Get and Display Own Map Images
//----> Name structur = 15_7887_12724.gif (zoomlevel_xvalue_yvalue.fileextension)
CustomGetTileUrl=function(a,b){
if (b==15 && a.x>=7887 && a.x<=7889 && a.y>=12724 && a.y<= 12725){
return "img/"+b+"_"+a.x+"_"+a.y+""+".gif";
}
else if (b==16 && a.x>=15775 && a.x<=15779 && a.y>=25449 && a.y<= 25451){
return "img/"+b+"_"+a.x+"_"+a.y+""+".gif";
}
else if (b==17 && a.x>=31551 && a.x<=31558 && a.y>=50899 && a.y<= 50903){
return "img/"+b+"_"+a.x+"_"+a.y+""+".gif";
}
else {
return "img/blank.gif";
}
}
//----> Create GTileLayer and apply the CustomGetTileUrl to it
var tilelayers = [new GTileLayer(copyrightCollection,15,17)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
//----> Apply Images to the Map
var mynewmap = new GMapType(tilelayers, new GMercatorProjection(18));
//----> Center Map
map.setCenter(new GLatLng(37.254000, -93.332000),15, mynewmap);
//----> Remove Map Type Buttons
map.removeMapType(G_NORMAL_MAP);
map.removeMapType(G_SATELLITE_MAP);
map.removeMapType(G_HYBRID_MAP);
} //close if browser compatible
</script>
Download all needed Files
OwnGoogleMap (4,7 MiB, 1.842 hits)
Nützliche Links
Add your own Custom Map
Automatic Tile Cutter
Custom Map Example
Custom Google Map
Get Your Coordinates
