TourEXTENDER, Overlay für Google Street View Touren selbst erstellen

TourEXTENDER, Overlay für Google Street View Touren selbst erstellen

DIY – Do It Yourself

TourEXTENDER, Overlay für Google Street View Touren selbst erstellen

Es werden nicht immer die großen Tools (TourEXTENDER, Overlays), benötigt, wenn man z.B. wie im folgenden Beispiel, nur zwei bis drei Panoramagruppen hat.

 


zum Profil Cafe Corner

Kompletter Quellcode

Alles was ROT Eingedruck ist muss angepasst werden
Das einzubindede Panorama bei Google Maps aufrufen!
https://www.google.com/maps/@51.7062531,7.3780813,3a,75y,297.92h,84.54t/data=!3m7!1e1!3m5!1sdyUCMxep1U8AAAQpkDF9Pw!2e0!3e2!7i13312!8i6656?hl=de-DE

PanoID aus Google Street View Panoramen extrahieren

Quellcode PanoID für die eigene Webseite

Quellcode TourEXTENDER wie oben dargestellt

<!DOCTYPE HTML>
<html>
<head>
<title>TITEL/NAME des Unternehmers</title>
<meta name="description" content="Beschreibung des Business">
<meta name="keywords" content="Stichworte (Kommagertrennt / Leerzeichen) Eins, Zwei, Drei">
<meta property="og:image" content="http://business-photo.molcon.de/google-business-view/recklinghausen/Cafe-Corner/streetview.jpg">
<link href="https://plus.google.com/110738124846448517531/" rel="publisher"><!-- Google+ ID Unternehmer -->
<link href="https://www.google.com/maps/place?cid=18297476467992710619" rel="place_id"><!-- Maps ID Unternehmer -->
<link href="https://plus.google.com/105065516716852340832" rel="author"><!-- Google+ ID Fotograf -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@voninnenansehen" />
<meta name="twitter:title" content="TITEL/NAME des Unternehmers" />
<meta name="twitter:description" content="Beschreibung des Business für Twitter" />
<meta property="og:type" content="company.website">
<!-- 
Folgender unsichbarer Text, bitte in Ihren erstellten Overlays nicht entfernen!
PanoID aus Google URL: https://business-view.photo/?p=8852 
Copyright Detlev Molitor, Business View Photo Ag, CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.de 
-->
<script>
var panorama;
var timer;
function jump(index){
var h=[];
h[0]=312;
h[1]=108;
h[2]=22;
h[3]=143;
var p=[];
p[0]="QGyziSLvdN8AAAQfDTk9bA"; <!-- PANO ID aus Link -->
p[1]="UJ5YXwUYpzQAAAQfDTn_aw"; <!-- PANO ID aus Link -->
p[2]="4FpbHhiMeBgAAAQfDU4oHQ"; <!-- PANO ID aus Link -->
p[3]="4x5ovYIJAKAAAAQfDYre6g"; <!-- PANO ID aus Link -->
var heading=h[index];
var pano=p[index];
var canvas=document.getElementById('map-canvas');
var panoramaOptions={
addressControl:false,
panControl:false,
pano:pano,
pov: {
heading:heading,
pitch:0,
zoom:0.3
}
}
panorama=new google.maps.StreetViewPanorama(canvas,panoramaOptions);
}
function spinIt() {
stopIt();
var increment=0.05;
timer=setInterval(function () {
pov=panorama.getPov();
pov.heading += increment;
while(pov.heading > 360.0) {
pov.heading -= 360.0;
}
while(pov.heading < 0.0) {
pov.heading += 360.0;
}
panorama.setPov(pov);
}, 10);
}
function init() {
jump(3);
<?
if ($_GET[run]=="true")echo"
spinIt();
";
?>
}
function stopIt() {
clearInterval(timer);
}
function ddovr(){
document.getElementById('dropdown').size=document.getElementById('dropdown').length;
stopIt();
}
function ddout(){
document.getElementById('dropdown').selectedIndex=0;
document.getElementById('dropdown').size=1;
spinIt();
}
document.getElementById('map-canvas').onmouseover=stopIt;
document.getElementById('map-canvas').onmouseout=spinIt;
document.getElementById('map-canvas').ontouchstart=stopIt;
document.getElementById('map-canvas').ontouchend=spinIt;
document.getElementById('dropdown').onmouseover=ddovr;
document.getElementById('dropdown').onmouseout=ddout;
document.getElementById('dropdown').onclick=ddout;
</script>
<!-- Stylesheet -->
<!-- viel spaß beim ändern der stylesheets -->
<style type="text/css">
#map-container {
position: relative;
width: 700px;
height: 467px;
}
#map-canvas{
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 467px;
}
#map-canvas img {
border: none !important;
max-width: none !important;
}
.klick {
cursor: pointer;
}
.normal {
color: #000000;
font-size: 14px;
}
#dropdown{
z-index: 1;
position: absolute;
top: 0;
right: 0;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
background-color:gold;
color: #0000FF;
font-weight: bold;
font-size: 16px;
border: 1px dotted #405871;
background-repeat: no-repeat;
background-position: 2px 1px;
padding-left: 20px;
border-width: small;
border-color: #FFFF00;
border-style: solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
list-style:none;
}
</style>
<!-- php -->
<?php
$aktuell = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF'];
?>
<!-- created Wed, 27 May 15 15:24:55 +0200 -->
</head>
<body onload="init();">
<script type="text/javascript" src="https://www.business-view.photo/include/wz_tooltip.js"></script>
 <script type="text/javascript" src="https://www.business-view.photo/include/tip_centerwindow.js"></script>
<div id="map-container">
<div id="map-canvas"></div>
<ul id="dropdown">
<li><a href="http://www.WEBSEITE-DES-KUNDEN.de/" target="_top" title="NAME DES KUNDEN" onmouseover="Tip('<p>STRASSE DES KUNDEN<br><a href=\'https://www.google.com/maps/place?cid=18297476467992710619\' title=\'Auf Google Maps ansehen\' target=\'_top\'>PLZ ORT DES KUNDEN</a><br>Email: <a href=\'mailto:EMAIL@DES-KUNDEN.de\'>EMAIL@DES-KUNDEN.de</a><br>Phone: TELEFON KUNDEN<br>Web: <a href=\'http://www.WEBSEITE-DES-KUNDEN.de/\' target=\'_top\'>www.WEBSEITE-DES-KUNDEN.de</a></p>', TITLE, 'NAME DES KUNDEN', CLICKCLOSE, true, STICKY, true, SHADOW, true, CLOSEBTN, true)" onmouseout="UnTip()"><img src="http://www.example.com/logo-des-kunden.jpg" alt="Logo NAME DES KUNDEN" border="0" width="143" height="86"></a></li>
<li onclick="jump(0)" class="klick">&raquo; Klickname1</li>
<li onclick="jump(1)" class="klick">&raquo; Klickname2</li>
<li onclick="jump(2)" class="klick">&raquo; Klickname3</li>
<li onclick="jump(3)" class="klick">&raquo; Klickname4</li>
<li>
<hr>
<!-- Links zu Sozialen Netzwerken des Kunden, es sollten max. 3 sein -->
<a href="https://business-view.photo/go/facebook/" target="_blank" class="klick"><img src="https://business-view.photo/graphics/facebook.png" alt="facebook" title="Folge uns auf Facebook" border="0" width="30" height="30"></a>
<a href="https://plus.google.com/104367896941189009031/" target="_blank" class="klick"><img src="https://business-view.photo/graphics/google+.png" alt="google+" title="Folge uns auf Google+" border="0" width="30" height="30"></a>
<a href="https://twitter.com/voninnenansehen" target="_blank" class="klick"><img src="https://business-view.photo/graphics/twitter.png" alt="twitter" title="Folge uns auf Twitter" border="0" width="30" height="30"></a>
<!-- Links zu Sozialen Netzwerken des Kunden, es sollten max. 3 sein / ENDE -->
<!-- Google Earth Einbindung, mit www.GeoSetter.de kann die Datei sofort erstellt werden -->
<a href="http://www.example.com/google-earth.kmz" class="klick"><img src="https://business-view.photo/graphics/google_earth.png" alt="Google Earth" title="Auf Google Earth ansehen" border="0" width="30" height="30"></a>
&nbsp;
<? if ($_GET[run]=='true')echo'<a href="'.$aktuell.'" target="_self"><img src="https://business-view.photo/graphics/graphics/Pause_Button.png" title="Animation Stoppen" border="0" width="30" height="30"></a>'; else echo'<a href="'.$aktuell.'?run=true" target="_self"><img src="https://business-view.photo/graphics/Play_Button.png" title="Animation Starten" border="0" width="30" height="30"></a>'; ?>
</li>
<li><hr><nobr><div class="normal">Gefällt mir: <a href="http://www.facebook.com/sharer.php?u=<? echo $aktuell; ?>" onclick="window.open('http://www.facebook.com/sharer.php?u=<? echo $aktuell; ?>','','status=no, scrollbars=yes, toolbar=no, width=650,height=500,screenX=0,screenY=0,left=50,top=50');;return false;" title="Auf Facebook teilen" alt="facebook" border="0"><img src="https://business-view.photo/graphics/facebook-like.png" alt="facebook like" title="Auf Facebook teilen" border="0" height="21"></a> <a href="https://plus.google.com/share?url=<? echo $aktuell; ?>" onclick="window.open('https://plus.google.com/share?url=<? echo $aktuell; ?>','','status=no, scrollbars=yes, toolbar=no, width=650,height=500,screenX=0,screenY=0,left=50,top=50');;return false;" title="Auf Google+ teilen" alt="Google+" border="0"><img src="https://business-view.photo/graphics/google+1button.jpg" alt="google+" title="Auf Google+ teilen" border="0" width="34" height="21"></a> </div></nobr></li>
<li><hr><font size="-2"><a href="https://goo.gl/KurzURL-LinkTeilen-Panorama" target="_blank" onmouseover="Tip('<p>Einfach unten links auf das Wort Google klicken.</p>', TITLE, 'Vergrößerte Darstellung', CLICKCLOSE, true, STICKY, true, SHADOW, true, CLOSEBTN, true)" onmouseout="UnTip()">Vergrößerte Darstellung</a><br>Fotograf: <!-- LINK direkt auf euer Profil bei Business View Photo Ag --> <a href="https://business-view.photo/vorname_nachname/" target="_blank" title="Google Street View Fotograf">Vorname Nachname Fotograf</a></font></li>
</ul>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script><!-- &amp;developerKey=YourKey --><!-- Falls voerhanden die developperKey des Kunden/Fotografen -->
<!-- Hier noch den Original Quellcode für Google Analytik einbinden für Statistik, vom Kunden -->
</body>
</html>

Download Quellcode

Download Quellcode als TXT Datei, mit zusätzlichen Funktionen!
Für den direkten Download Link, einfach ein Like, Tweet oder +1 anklicken.



 




 


Quellcode PanoID

Gerne können Sie mit folgendem Code, die Funktion bei Ihnen in der Webseite anbieten

<h1>PanoID aus Google Street View Panoramen extrahieren</h1>
<iframe src="https://business-view.photo/include/panoid-googlestreetview.php" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen>
<a href="https://business-view.photo/include/panoid-googlestreetview.php">PanoID aus Google Street View Panoramen</a>
</iframe>

Weiterführende Informationen


 

Wir hoffen, dass Ihnen unsere Themenauswahl zusagt und freuen uns über Ihr Feedback.

 


 

facebook Gruppe   facebook Seite   twitter   linkedin   XING Gruppe     Google+   tumblr   disqus   Pinterest   YouTube   VK   Marktplatz Mittelstand

 

Mehr kostenlose GOOGLE, Bing, Yahoo, facebook-Tipps

Melden Sie sich jetzt zum kostenlosen Newsletter an und erhalten Sie die neusten Beiträge rund um Google, Bing, Yahoo, facebook-Optimierung.
Enter your email address:


Delivered by FeedBurner

Gefällt Ihnen die Themenauswahl unserer News? Der Aufbau, der Inhalt, die Optik? Wenn ja würden wir uns um eine Nachricht freuen, auch über konstruktive Kritik sind wir sehr dankbar. Gefällt Ihnen unsere Webseite? Fünf Fragen, gestalten Sie unsere Webseite mit.

31. August 2016 / by / in , , , , , , , , , , ,

Preisangebote, wenn nichts anderes angegeben, in Euro, vorbehaltlich der Verfügbarkeit und zuzüglich der Gesetzlich vorgeschriebenen Mehrwertsteuer, Zwischenverkauf vorbehalten, unsere Rabatte, Sonderpreise und / oder Nettopreise gelten nur für Geschäftskunden, die als Unternehmer im Sinne des BGB (§14, Abs. 1) tätig sind. Es gelten bei Beauftragung / Bestellung ausschließlich unsere AGB : Allgemeinen Liefer- und Geschäftsbedingungen.



Webdesign & Idee by Business View Photo Ag | Virengeprüft mit McAfee Siteadvisor


Diese Website verwendet eigene, fremde Cookies und ähnlichen Technologien wie z.B. Conversion Tracking von Google & Twitter. Durch die Nutzung unserer Dienste / Webseite(n) erklären Sie sich mit deren Einsatz einverstanden. more information

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen