how can I display map in GK_contact like on Steakhouse ?

Hi,
I use Steackhouse template on another website and I'd like to have the google map background on the module using gk_contact with Simplicity.
I tried to use the advanced parameter "map bigtitle contact-form" in the module
and copied/pasted gk.stuff.css from Steakhouse template to Simplicity
but no way
what do I miss ?
(My website using simplicity is on local install)

Hi

I'm sorry, but I would need to see how You got this now, so I'll be able to compare and tell what is missing. Can You please put site online and send me an url.

Ok I understand
I put it online right now and post the url.

For discretion reason, I sent to you the url by PM
I hope there's no problem with that.

Hi,
could you see my Private Message with the url ? I don't know if it was sent without problem
Thanks

Hi

Try add this code to /js/gk/script.js

Code: Select all

// Google maps function
var gkMapInitialize = function() {
  var maps = jQuery('.gk-map');
  var mapCenters = [];
  var mapAreas = [];
 
  maps.each(function(i, map) {
     map = jQuery(map);
   mapCenters[i] = new google.maps.LatLng(0.0, 0.0);
    
    
   if(map.data('latitude') !== undefined && map.data('longitude') !== undefined) {
      mapCenters[i] = new google.maps.LatLng(
                 parseFloat(map.data('latitude')),
                 parseFloat(map.data('longitude'))
              );
   }
    
    
     var mapOptions = {
       zoom: parseInt(map.data('zoom'), 10) || 12,
       center: mapCenters[i],
       panControl: map.data('ui') === 'yes' ? true : false,
       zoomControl: map.data('ui') === 'yes' ? true : false,
       scaleControl: map.data('ui') === 'yes' ? true : false,
       disableDefaultUI: map.data('ui') === 'yes' ? false : true,
       mapTypeControl: map.data('ui') === 'yes' ? true : false,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER
        }
     };
   
     mapAreas[i] = new google.maps.Map(map.get(0), mapOptions);
     var link = jQuery('<a>', { class: 'gk-map-close'});
     link.insertAfter(map);
     // custom events for the full-screen display
     var marker = null;
     map.on('displaybigmap', function() {
        marker = new google.maps.Marker({
           position: mapCenters[i],
           map: mapAreas[i],
           animation: google.maps.Animation.DROP
        });
        
        setTimeout(function() {
           google.maps.event.trigger(mapAreas[i], 'resize');
        }, 300);
        
        mapAreas[i].setCenter(mapCenters[i]);
        
        if(map.data('line') !== undefined) {
           var points = map.data('line').split(';');
           var polyline = [];
           
           points = points.filter(function(x) {
              return x != '';
           });
           
           jQuery.each(points, function(i, item) {
              var coords = item.split(',');
              polyline.push(new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1])));
           });
           
           if(points.length) {
              var path = new google.maps.Polyline({
                 path: polyline,
                 geodesic: true,
                 strokeColor: '#ff0000',
                 strokeOpacity: 1.0,
                 strokeWeight: 2
              });
              
              path.setMap(mapAreas[i]);
           }
        }
     });
    
     if(maps[i].hasClass('static')) {
        marker = new google.maps.Marker({
           position: mapCenters[i],
           map: mapAreas[i],
           animation: google.maps.Animation.DROP
        });
     }
    
     map.on('hidebigmap', function() {
        if(marker) {
           marker.setMap(null);
        }
     });
  });
 
  jQuery(window).resize(function() {
     mapAreas.each(function(map, i) {
        map.setCenter(mapCenters[i]);
     });
  });
};


Hi
I added the code at the end of the script.js,
but nothing changes except images are no more displayed in the frontend (img class="gkImageBlock" for example)
I tried to put the code at the top of the script and have the same issue.
Maybe I have to insert the code somewhere special in the script ?

Sorry !
I didn't copy/paste the whole code.
No more problem with the images, but there's not the map displayed as contact background.

Hi

Please send me an access to ftp. I need to try couple of things myself.

Hi

Thanks for the access. Here is a css missing:

Code: Select all

.gk-map {
    z-index: 2;
}


and some extra javascript:

Code: Select all

var page_loaded = false;
//
jQuery(window).load(function() {
   // Google Maps loading
   var loadScript = function() {
      jQuery.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&callback=gkMapInitialize")
        .fail(function( jqxhr, settings, exception ) {
         console.log('Google Maps script not loaded');
      });      
   };
   
   if(jQuery('.gk-map').length > 0) {
      loadScript();
   }
});


now it works

Thanks !
did you made the changes ?
I'd like if possible the map 100% width and behind a mask as it is displayed here http://www.lejardindescausses.com/#contact
because it is hard to read the contact info actually
thanks for your help

Hi

Yes I have made the changes to add the missing code, but I'm afraid I cannot help with full width style. It would require breaking tempalte apart and put it back together with a different code. Sorry, but this is beyond our support.