• C
    User Attivo •

    caricare un file.js esterno dopo il load della pagina.

    ciao a tutti, come da titolo sto cercando di caricare un file javascript esterno solo dopo aver caricato la pagina ( purtroppo ho dei conflitti con il tema che mi ci costringono) ma evidentemente sbaglio qualcosa, perchè mi ritrovo con un errore. è una mappa google e invece della mappa mi appare "Basic Google Maps Placemarks error: bgmpData undefined.", se effettuo il refresh del browser la mappa invece c'è.
    il js esterno è il seguente e si chiama functions.js

    
* Wrapper function to safely use $

*/
function bgmp_wrapper( $ )
{


   $.bgmp = 
   {

      init : function()
      {
         // Initialize variables
         $.bgmp.prefix            = 'bgmp_';
         $.bgmp.name               = 'Basic Google Maps Placemarks';
         $.bgmp.canvas            = document.getElementById( $.bgmp.prefix + 'map-canvas' );      // We have to use getElementById instead of a jQuery selector here in order to pass it to the Maps API.
         $.bgmp.map               = undefined;
         $.bgmp.markerClusterer      = undefined;
         $.bgmp.markers            = {};
         $.bgmp.infoWindowContent   = {};

         if( typeof bgmpData === 'undefined' )
         {
            $( $.bgmp.canvas ).html( $.bgmp.name + " error: bgmpData undefined." );
            return; 
         }

         // Initialize single info window to reuse for each placemark
         $.bgmp.infoWindow = new google.maps.InfoWindow( {
            content      : '',
            maxWidth   : bgmpData.options.infoWindowMaxWidth
         } );

         // Format numbers
         bgmpData.options.zoom               = parseInt( bgmpData.options.zoom );
         bgmpData.options.latitude            = parseFloat( bgmpData.options.latitude );
         bgmpData.options.longitude            = parseFloat( bgmpData.options.longitude );
         bgmpData.options.clustering.maxZoom      = parseInt( bgmpData.options.clustering.maxZoom );
         bgmpData.options.clustering.gridSize   = parseInt( bgmpData.options.clustering.gridSize );

         // Register event handlers
         $( '.' + $.bgmp.prefix + 'list' ).find( 'a' ).filter( '.' + $.bgmp.prefix + 'view-on-map' ).click( $.bgmp.viewOnMap ); 

         // Build map
         if( $.bgmp.canvas )
            $.bgmp.buildMap();
         else
            $( $.bgmp.canvas ).html( $.bgmp.name + " error: couldn't retrieve DOM elements." );
      },


      buildMap : function()
      {
         var mapOptions;

         if( bgmpData.options.mapWidth == '' || bgmpData.options.mapHeight == '' || bgmpData.options.latitude == '' || bgmpData.options.longitude == '' || bgmpData.options.zoom == '' || bgmpData.options.infoWindowMaxWidth == '' )
         {
            // @todo update w/ cluster options?

            $( $.bgmp.canvas ).html( $.bgmp.name + " error: map options not set." );
            return;
         }

         mapOptions = 
         {
            'zoom'                  : bgmpData.options.zoom,
            'center'               : new google.maps.LatLng( bgmpData.options.latitude, bgmpData.options.longitude ),
            'mapTypeId'               : google.maps.MapTypeId[ bgmpData.options.type ],
            'mapTypeControl'         : bgmpData.options.typeControl == 'off' ? false : true,
            'mapTypeControlOptions'      : { style: google.maps.MapTypeControlStyle[ bgmpData.options.typeControl ] },
            'navigationControl'         : bgmpData.options.navigationControl == 'off' ? false : true,
            'navigationControlOptions'   : { style: google.maps.NavigationControlStyle[ bgmpData.options.navigationControl ] },
            'streetViewControl'         : bgmpData.options.streetViewControl
         };

         // Override default width/heights from settings
         $( '#' + $.bgmp.prefix + 'map-canvas' ).css( 'width', bgmpData.options.mapWidth );      // @todo use $.bgmp.canvas intead of hardcoding it?
         $( '#' + $.bgmp.prefix + 'map-canvas' ).css( 'height', bgmpData.options.mapHeight );
         // @todo this prevents users from using their own stylesheet?


         // Create the map
         try
         {
            $.bgmp.map = new google.maps.Map( $.bgmp.canvas, mapOptions );
         }
         catch( e )
         {
            $( $.bgmp.canvas ).html( $.bgmp.name + " error: couln't build map." );
            if( window.console )
               console.log( $.bgmp.prefix + 'buildMap: '+ e );

            return;
         }

         $.bgmp.addPlacemarks( $.bgmp.map );     

         // Activate marker clustering
         if( bgmpData.options.clustering.enabled )
         {
            // BGMP stores markers in an object for direct access (e.g., markers[ 15 ] for ID 15), but MarkerCluster requires an array instead, so we convert them 
            var markersArray = [];
            for( var m in $.bgmp.markers )
               markersArray.push( $.bgmp.markers[ m ] );

            $.bgmp.markerClusterer = new MarkerClusterer(
               $.bgmp.map,
               markersArray,
               {
                  maxZoom      : bgmpData.options.clustering.maxZoom,
                  gridSize   : bgmpData.options.clustering.gridSize,
                  styles      : bgmpData.options.clustering.styles[ bgmpData.options.clustering.style ]
               }
            );
         }
      },


      isInt : function( value )
      {
         if( !isNaN( value ) && parseFloat( value ) == parseInt( value ) )
            return true;
         else
            return false;
      },


      addPlacemarks : function( map )
      {
         // @todo - should probably refactor this since you pulled out the ajax. update phpdoc too

         if( bgmpData.markers.length > 0 )
         {
            for( var m in bgmpData.markers )
            {
               $.bgmp.createMarker(
                  map,
                  bgmpData.markers[ m ][ 'id' ],
                  bgmpData.markers[ m ][ 'title' ],
                  bgmpData.markers[ m ][ 'latitude' ],
                  bgmpData.markers[ m ][ 'longitude' ],
                  bgmpData.markers[ m ][ 'details' ],
                  bgmpData.markers[ m ][ 'icon' ],
                  parseInt( bgmpData.markers[ m ][ 'zIndex' ] )
               );
            }
         }
      },


      createMarker : function( map, id, title, latitude, longitude, details, icon, zIndex )
      {
         var infoWindowContent, marker;

         if( isNaN( latitude ) || isNaN( longitude ) )
         {
            if( window.console )
               console.log( $.bgmp.prefix + "createMarker(): "+ title +" latitude and longitude weren't valid." );

            return false;
         }

         if( icon == null )
         {
            // @todo - this check may not be needed anymore

            if( window.console )
               console.log( $.bgmp.prefix + "createMarker(): "+ title +"  icon wasn't passed in." );
            return false;
         }

         if( !$.bgmp.isInt( zIndex ) )
         {
            //if( window.console )
               //console.log( $.bgmp.prefix + "createMarker():  "+ title +" z-index wasn't valid." );   // this would fire any time it's empty

            zIndex = 0;
         }

         infoWindowContent = '<div class="'+ $.bgmp.prefix + 'placemark"> <h3>'+ title +'</h3> <div>'+ details +'</div> </div>';

         try
         {   
            // Replace commas with periods. Some (human) languages use commas to delimit the fraction from the whole number, but Google Maps doesn't accept that.
            latitude = parseFloat( latitude.replace( ',', '.' ) );
            longitude = parseFloat( longitude.replace( ',', '.' ) );

            marker = new google.maps.Marker( {
               'bgmpID'   : id,
               'position'   : new google.maps.LatLng( latitude, longitude ),
               'map'      : map,
               'icon'      : icon,
               'title'      : title,
               'zIndex'   : zIndex
            } );

            $.bgmp.markers[ id ] = marker;
            $.bgmp.infoWindowContent[ id ] = infoWindowContent;

            google.maps.event.addListener( marker, 'click', function() 
            {
               $.bgmp.openInfoWindow( map, marker, infoWindowContent );
            } );

            return true;
         }
         catch( e )
         {
            //$( $.bgmp.canvas ).append( '<p>' + $.bgmp.name + " error: couldn't add map placemarks.</p>");      // add class for making red? other places need this too?   // @todo - need to figure out a good way to alert user that placemarks couldn't be added
            if( window.console )
               console.log( $.bgmp.prefix + 'createMarker: '+ e );
         }
      },


      openInfoWindow : function( map, marker, infoWindowContent )
      {
         $.bgmp.infoWindow.setContent( infoWindowContent );
         $.bgmp.infoWindow.open( map, marker );

         if( bgmpData.options.viewOnMapScroll )
         {         
            $( 'html, body' ).animate(
            {
               scrollTop: $( '#' + $.bgmp.prefix + 'map-canvas' ).offset().top
            }, 900 );
         }
      },


      viewOnMap : function( event )
      {
         var id = $( this ).data( 'marker-id' );
         $.bgmp.openInfoWindow( $.bgmp.map, $.bgmp.markers[ id ], $.bgmp.infoWindowContent[ id ] );
      }
   }; // end bgmp

   // Kick things off...
   $( document ).ready( $.bgmp.init );

} // end bgmp_wrapper()

bgmp_wrapper( jQuery );

    nella pagina dove lo devo caricare ho messo dopo il body

    <script>
var JS = {
  load: function(src, callback) {
    var script = document.createElement('script'),
        loaded;
    script.setAttribute('src', src);
    if (callback) {
      script.onreadystatechange = script.onload = function() {
        if (!loaded) {
          callback();
        }
        loaded = true;
      };
    }
    document.getElementsByTagName('head')[0].appendChild(script);
  }
};


JS.load("..../functions.js", function() {
    bgmp_wrapper( jQuery );
});
</script>

    ​dove sto sbagliando?
    grazie in anticipo per l'aiuto

    0
  • U
    Moderatore •

    Ciao Claire,
    la console errori che dice?
    Il percorso del file è corretto?

    0
  • C
    User Attivo •

    ciao, nessun errore. purtroppo so che c'è un problema che ho già dovuto affrontare e in altre cose ho risolto così, perchè nel sito è presente un player che riproduce musica non-stop mentre si naviga. E quello crea un mare di problemi, questa mappa è l'unica che non riesco in nessun modo a caricare a meno di ricaricare l'intera pagina, ovviamente fermando quindi il player per un attimo quando si accede alla pagina della mappa. non mi vengono in mente altre soluzioni....

    0
Effettua l'accesso per rispondere