media player; facebook like button; twitter button toevoegen aan infowindow van maps

**Quispie** · 10 juni 2012, 19:48

Al een tijdje ben ik bezig om google maps te programmeren en dit gaat aardig. Nu wil ik naast alle info, die ik haal uit een php script die gelinkt is aan een api, ook een media player die uit hetzelfde php script de url ophaalt van het mp3tje die moet worden afgespeeld. Het lukt wel om de looks van de media player weer te geven, maar deze divjes kunnen het bijbehorende javascript niet vinden. Als ik deze code in een los html pagina zet werkt alles, zonder problemen. Hieronder staat de complete code waar het om draaid

Javascript Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shoudio verbindig test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDFUbv6XEO15bVG9gMmwaCgwugVKBwnDes&sensor=true"></script>
<script type="text/javascript" src="http://localhost/wordpress/jPlayer/jquery.jplayer.min.js"></script>
<SCRIPT TYPE="text/javascript">
 
 
var input = 'henk';
 
$.ajax({
        url: 'http://localhost/wordpress/shoudio.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) { 
             input = data.shoudios;
             
            /*
            $.each(data.shoudios, function(i,shoudio){
                alert(shoudio.id);
            });*/
            alles()
        },
        error: function() { alert('boo!'); },
    });
 
 
function alles(){
    //Variable declareren.
    var image = 'http://localhost/wordpress/testlogosmallblack.png';
 
    $.each(input, function(i, shoudio){
        window['contentString'+i] = '<div id="content"><div id="siteNotice">'+ shoudio.created_at +'</div><h2 id="firstHeading">'+ shoudio.message +'</h2><div id="bodyContent">'+shoudio.username+'</div></div><div id="extrainfo'+shoudio.id+'"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div id="jp_container_1" class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><div class="jp-current-time"></div><div class="jp-duration"></div></div></div></div></div><div class="fb-like" data-href="http://www.mytotem.nl/" data-send="true" data-width="450" data-show-faces="false" data-font="lucida grande"></div>';
    
        window['infowindow'+i] = new google.maps.InfoWindow({
            content: window['contentString'+i]
                        });
        window['markerpoint'+i] = new google.maps.LatLng(shoudio.lat, shoudio.lon);
 
 
    });
    
 
 
    //Marker toevoegen
    function addMarker(positieMarker,infowindow) {
    
      var marker = new google.maps.Marker({
        position: positieMarker,
        map: map,
        icon:image
      });
      google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
      });
    }
    initialize();
    //Alles initializeren
    function initialize() {
        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center:new google.maps.LatLng(52.1750, 4.7916)
        };
        
        map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
         
        $.each(input, function(i, shoudio){
            
        
            addMarker(window['markerpoint'+i],window['infowindow'+i]);
        });
    }
}
 
    
 
</SCRIPT>
<script type="javascript/text">
        (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
        </script>
        
      <div id ="jp-jplayer"></div>
        <script>
    $(document).ready(function(){
        $("#jquery_jplayer_1").jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
                    mp3:"audio.mp3"
                });
            },
            swfPath: "../js",
            wmode: "window"
        });
    });
    </script> 
</head>
  <body >
 
                
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Dit geeft hij weer:
maps_show.jpg
Na Shoudio ID op regel 43 begint de mediaplayer tot en met de 5 x </div>. Deze zou het script (beginnend op regel 102 t/m 112) moeten ophalen.
Het laatste stuk (op regel 43) is de code die de facebook like button moet weergeven. Deze zou het script direct onder die van de media player moeten ophalen, dit wordt ook niet gedaan.

Wie weet wat ik fout doe en hoe ik dit moet oplossen??

**rajmv** · 20 juni 2012, 12:35

Origineel gepost door Quispie

Wie weet wat ik fout doe en hoe ik dit moet oplossen??

Ik kan je script niet testen, want ik mis de server-side scripts.. Dus anderen kunnen het ook niet checken op het moment.

Maar ik garandeer je wel dat als je een ajax call naar localhost doet, het alleen werkt als je de browser vanaf de PHP server localhost draait natuurlijk.

Heb je wel eens gehoord van http://freedns.afraid.org/ ? Daar kun je een domein naam aan je thuis-server koppelen, en het script dus vanaf anywhere oproepen.
Of je gebruikt gewoon je externe IP op die machine, natuurlijk. (google "my ip", first hit)..
Moet je wel even je webserver en internet router configgen dat ze HTTP traffic naar die specifieke interne machine doorsturen.
Best handig om je thuis server aan het interweb te hebben hangen, maar je moet geen scripts als phpmyadmin op /phpmyadmin laten staan (apache alias veranderen naar bij pma-lksjd3092j234n ofzo dus)

Verder vraag ik me af of je bekend bent met javascript debuggers. Op het moment is IE9+ of getfirefox.com+getfirebug.com de handigste debug toolset om plotselinge fouten in javascripts te debuggen, want die kunnen stoppen op het moment dat een fout zich voordoet. Of je plaatst op een strategische plaats een "debugger;" (zonder quotes) commando, zodat de browser javascript debugger op dat moment even stilstaat voor je, en je de resultaat-variabelen kan inspecteren ("watch" window).

Ik ben wel geinteresseerd om je follow-ups te horen, mischien dat ik je nog effectiever kan helpen.

Het handigste zou zijn als je dit script op een URL zet die ik vanaf hier kan bereiken, dan wil ik er wel even zelf een js debugger op los laten..

**Quispie** · 20 juni 2012, 13:51

Hartelijk dank voor de reactie!

Dat heeft u goed gezien, ik ben nog niet zo bekent met al die handigheidjes, dit is eigenlijk de eerste keer dat ik met php en javascript werk.

Ik ben een 2e jaars Technische informatica student en moest voor een project hiermee werken. Het was voor een extern bedrijf en zat met mijn handen in het haar!

luisteren naar totems
Hier kunt u zien hoe ik het heb opgelost en dit werkt overal behalve in IE7,8 en 9 vanwege de jquery die wordt geblokkeerd. Vandaar de link die onder de extra info knop zit. Mytotem.nl is namelijk een WP pagina en moest werken met een Iframe omdat ik met geen mogelijkheid de js werkend kreeg dmv meerdere plugins.

Dit hebben wij opgeleverd en is tot dusver goed bevallen, maar zelf ben ik nog erg nieuwsgierig hoe ik hem ook goed werkend krijg in IE9. Heeft u toevallig een idee?

**rajmv** · 20 juni 2012, 14:13

Origineel gepost door Quispie

Dit hebben wij opgeleverd en is tot dusver goed bevallen, maar zelf ben ik nog erg nieuwsgierig hoe ik hem ook goed werkend krijg in IE9. Heeft u toevallig een idee?

jawel, in de IE10 debugger krijg ik de volgende foutmeldingen, het lijkt op een typo ergens in je javascript;

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
luisteren-naar-totems
SCRIPT5007: Unable to get property 'offsetWidth' of undefined or null reference
main.js, line 29 character 1104
SCRIPT1004: Expected ';'
player.html, line 150 character 172

Onderwerp: media player; facebook like button; twitter button toevoegen aan infowindow van maps

Onderwerp opties

Zoek in onderwerp

Vraag is niet opgelost

media player; facebook like button; twitter button toevoegen aan infowindow van maps

Andere oplossing

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact