I was recently asked by a client of mine to display his stores according to the user’s postal code or address.
I will not do a tutorial on how to display your stores on Google Maps since Google has done an excellent job on the tutorial. However, the issue I faced was that the request to add this feature came after the project was done and I didn’t want to go and change my entire home page design. I
decided to use a lightbox. Now there’s many lightbox plugins, in my case, I’m using Colorbox. I had my lightbox setup to launch immediately so that the user is prompted to enter their postal code and find the closest location. However, Google Map would not show up in my lightbox.

How to set up Google Maps with a lightbox

Basically this works (well should) with all lightbox. If you look how they are built, they will often have a div for the overlay and a div for the content. The simple solution is to actually tell Google Map where to find the correct div#map to use.
I went with an inline lightbox (obviously hidden by default).

This is how my html looks like. It only uses what Google Map tutorial suggested.

<div class="doNotShow">
    <div id="locationMap"  >
        <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
        <div id="map" style="width: 100%; height: 300px"></div>
    </div>
</div>

The important part is here, in the javascript load function

var googleMap = $("#cboxLoadedContent").find("#map")[0];
map = new google.maps.Map(googleMap, {
        center: new google.maps.LatLng(40, -100),
        zoom: 4,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});

What I’ve done here is taken the lightbox content div (#cboxLoadedContent”) to select the #map div used by Google to load the map. And now should work!!

So there you have it, this should work with any lightbox as long as you find it’s loading content div.

UPDATE
It has come to my attention that Chrome would not work properly. It would load the map and only show a quarter of the map. The reason behind this is the way we load/inject the map.
Quick fix is to use the onComplete callback of colorbox.

onComplete : function() {
  load();
}

The post Google Maps and Lightbox appeared first on Coding Insight.