Developing (v7+)

Google map block not showing properly

Permalink 1 user found helpful September 19, 2012 at 12:51 PM

I am having an issue with my google map blocks not display properly. See attached screenshot.

I have a grey box where the map should be, but only part of the map shows up. When I try to drag out my map, it snaps back into the top left corner as shown.

When I zoom in or out, it displays part of the map, but it never takes up the entire grey zone.

I have checked it both logged in and not logged in, on Chrome and Safari 6.

The error appears to be somewhat related to my console / developer's tool. For example, if the page is showing grey, and I go to tools > console, then the maps appear correctly. However I don't think this is a real solution...

1 Attachment

JohntheFish replied on Sep 19, 2012 at 1:12 pm Permalink Reply

This is often a result of it rendering while partially hidden or before the document is properly ready. The howto gives a general solution:
http://www.concrete5.org/documentation/how-tos/developers/improve-r...

Blocks by AJAX incorporates a more sophisticated version of this with ajax delayed loading as a template for the Google Maps block:
http://www.concrete5.org/marketplace/addons/blocks-by-ajax/...

Formigo's direction (map) block incorporates both of the above:
http://www.concrete5.org/marketplace/addons/formigo-directions/...

The same techniques can be applied to other blocks that exhibit similar issues such as video players.

nicolechung replied on Sep 19, 2012 at 2:20 pm Permalink Reply

Hm, I **sort of ** get what you are saying, but I had few issues with this.

First of all, why would I have to write workaround code to make something work when it's a default block in concrete5?

Also, when I turn on the console, the map appears...so it's there, but it looks like the positioning of the map is off somehow. That is, the map is there, it's just not positioned on the grey block that it's supposed to show up on (see screenshot)

Second, I tried the following using the id that contained the map and it did not work:

window.onload = function() {
  var t;
  var elem;
  var startWhenVisible = function (){
    elem = document.getElementById('googleMapCanvas151');
    if (elem.offsetWidth > 0 || elem.offsetHeight > 0){
      window.clearInterval(t);
      return true;
    } 
    return false;
  };   
  if (!startWhenVisible()){
    t = window.setInterval(function(){startWhenVisible();},100);      
  }
}

JohntheFish replied on Sep 19, 2012 at 2:40 pm Permalink Reply

The default view works fine in many default situations. But not all.

In your code (a new view template for the map block) you need to move the call to google that initialises the map block into the if{}, otherwise the code you have does nothing.

The purpose is to delay the initialisation of the map block until its container is ready for it.

nicolechung replied on Sep 19, 2012 at 3:06 pm Permalink Reply

Brilliant, worked great, thanks so much!

nicolechung replied on Feb 20, 2013 at 6:24 pm Permalink Reply

Okay, soooo...I updated to concrete 5.6, and my map stopped working when I was logged out.

Then I upgraded my map plugin, and now the map shows up...but now it has the same problem I posted about before (map only partially showing, the rest of the rectangle is grey)

Here is the code I had that was working before:

window.onload = function() {
  var t;
  var elem;
  var startWhenVisible = function (){
    elem = document.getElementById('googleMapCanvas151'); //map_canvas4 
    if (elem && (elem.offsetWidth > 0 || elem.offsetHeight > 0)){
      window.clearInterval(t);
      return true;
    } 
    return false;
  };   
  if (!startWhenVisible()){
    t = window.setInterval(function(){startWhenVisible();},100);      
  }
}

Here is my google map code block:

var myLatlng = new google.maps.LatLng(52.749370751521006, -97.82000594375);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP  };
  var map = new google.maps.Map(document.getElementById("map_canvas4"), myOptions);
      google.maps.event.addListener(map, 'zoom_changed', function() {
   updateZoom(map);
  });
  google.maps.event.addListener(map, 'center_changed', function() {
    updateMapCoordinates(map);
  });
  //maptypeid_changed
  google.maps.event.addListener(map, 'maptypeid_changed', function() {
    updateMapType(map);

Viewing 15 lines of 61 lines. View entire code block.

 
var myLatlng = new google.maps.LatLng(52.749370751521006, -97.82000594375);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP  };
  var map = new google.maps.Map(document.getElementById("map_canvas4"), myOptions);
      google.maps.event.addListener(map, 'zoom_changed', function() {
   updateZoom(map);
  });
  google.maps.event.addListener(map, 'center_changed', function() {
    updateMapCoordinates(map);
  });
 
  //maptypeid_changed
  google.maps.event.addListener(map, 'maptypeid_changed', function() {
    updateMapType(map);
  });
  updateMapCoordinates(map);
  updateZoom(map);
  updateMapType(map);
    if(markers){
  $.each(markers,function(counter,item){
  position = new google.maps.LatLng(item.xCoor,item.yCoor);
  if(!item.icon){
  var marker = new google.maps.Marker({
  markerID : item.id,
  map: map,
  position: position
  });
  }else{
  var marker = new google.maps.Marker({
    map: map,
    position: position,
    icon : item.icon.toString(),
    markerID : item.id
  });
  }
   google.maps.event.addListener(marker, 'click', function(arg) {
    var content = "";
    $.get(infoUrl,{id: marker.markerID, "rand": randomNumber},function(data){
      content = data;
      // The info window version with the "to here" form open
      infowindow = new google.maps.InfoWindow({content: content,width:200});
      infowindow.open(map, marker);
    });
 
    });
  });
}
}
$(initialize_map4);
var updateMapCoordinates = function(map){
    mapX = map.center.lat();
    mapY = map.center.lng();
    $('#xCoor').val(mapX);
    $('#yCoor').val(mapY);
}
 
var updateZoom = function(map){
   $('#zoom').val(map.zoom.toString());
}
var updateMapType = function(map){
   $('#mapTypeId').val(map.mapTypeId.toString().toUpperCase());
}

JohntheFish replied on Feb 20, 2013 at 6:40 pm Permalink Best Answer Reply

The above fix was built into the map block for c5.6.1, so if you have the standard c5.6.1 map block from c5.6.1, with no overrides, it should now work fine in all situations including hidden-> reveal.

nicolechung replied on Feb 20, 2013 at 6:47 pm Permalink Reply

I do have a question (somewhat related)...I was actually using an addon (not the map block)...and I had to put the code in the package "elements" which apparently is not over-rideable??

Is this something getting changed in future versions of concrete5? I think this is why it took me so long to track down the issue (if it was override-able I could have upgraded the plugin probably without any problems)

JohntheFish replied on Feb 20, 2013 at 6:52 pm Permalink Reply

Since 5.6 a lot more has been over-ridable, but I have not tried overriding elements yet.

nicolechung replied on Feb 20, 2013 at 6:41 pm Permalink Reply

Ooops wait got it working.

It turns out the update for the addon removed a jQuery method and replaced it with a straight up Javascript method, so I had to adjust it.

JohntheFish replied on Feb 20, 2013 at 6:54 pm Permalink Reply

Formigo contributed a stripped down version to the howto code that used straight javascript. When doing the github pull on the core it made sense to work from that as it was similar size and removed the jQuery dependency.

nicolechung replied on Feb 20, 2013 at 7:18 pm Permalink Reply

No I used that code (Formigo) but the call to initialize the map was using jQuery

window.onload = function() {
  var t;
  var elem;
  var startWhenVisible = function (){
    elem = document.getElementById('googleMapCanvas151');
    if (elem.offsetWidth > 0 || elem.offsetHeight > 0){
      window.clearInterval(t);
// **was a jquery call here, but changed it to javascript**
      return true;
    } 
    return false;
  };   
  if (!startWhenVisible()){
    t = window.setInterval(function(){startWhenVisible();},100);      
  }

Viewing 15 lines of 16 lines. View entire code block.

 
window.onload = function() {
  var t;
  var elem;
  var startWhenVisible = function (){
    elem = document.getElementById('googleMapCanvas151');
    if (elem.offsetWidth > 0 || elem.offsetHeight > 0){
      window.clearInterval(t);
// **was a jquery call here, but changed it to javascript**
      return true;
    } 
    return false;
  };   
  if (!startWhenVisible()){
    t = window.setInterval(function(){startWhenVisible();},100);      
  }
}

Forums

Developing (v7+)

Google map block not showing properly

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?