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.

Anzeige nicht Möglich
Bitte akzeptieren Sie unsere Cookie-Richtlinie, und klicken Sie hier

Not possible to display
Please accept our cookie policy and click here

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

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.
[sociallocker]
Download Quellcode TourOverlay Google Street View
[/sociallocker]

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

Google Street View Tour – von innen ansehen, selbst erstellen
Gratis Badge Street View Trusted (Aufkleber, für Ihre Kundenwerbung)
Zeitreise bei Google (Fahren Sie mit der Maus über den Zeitstrahl)

PanoID aus Google Street View Panoramen extrahieren

Quellcode PanoID für die eigene Webseite

Anzeige nicht Möglich
Bitte akzeptieren Sie unsere Cookie-Richtlinie, und klicken Sie hier

Not possible to display
Please accept our cookie policy and click here

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

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

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.

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

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

Kompletter Quellcode

Quellcode TourEXTENDER wie oben dargestellt

Download Quellcode

Quellcode PanoID

Weiterführende Informationen

PanoID aus Google Street View Panoramen extrahieren

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

Mehr kostenlose GOOGLE, Bing, Yahoo, facebook-Tipps

Schreibe einen Kommentar Antworten abbrechen