Google Maps API v3 and jQuery Dialog
July 7, 2013

I got a project the other day. Easy-peasy. All I had to do was add a map to the site, at the request of local customers who want to pick up their order rather than have it shipped. We don't really have a true brick and mortar store and we've been a catalog company for ages, so very few people outside our industry know we're in town, much less where in town.

No problem.

Well, I'm just a front-end developer and mostly just a designer. Our site is built in Visual Studio, in C# and I'm still learning where stuff if and how to manipulate it. So, I expected a little more difficulty than just throwing the map up ... but nothing like what I actually experienced.

The Google easy "embed" code didn't work at all. I've no idea why, but in IE7 and IE8, it was totally missing. So I hit Teh Googlez and found a confusing mess. After a day and a half of sifting through Stack Overflow, blog posts and forums, I finally had an answer for IE8 and up.

I abandoned the basic embed code and went to v3 of the API, assuming I'd have better control. Whilst I've been designing websites since 1996 or 1997, until recently I've allowed myself to be intimidated by "programming" - even javascript. I've kept up with what could be done with javascript, but was too intimidated to learn it. Luckily, my current employer is thrilled with anyone wanting to learn new things and has been supportive of my learning on the job. So. Here's my chance to put what I've been learning about javascript to the test, right?

First, I got it working on a dummy page on one of my domains, just to make sure I understood all the concepts. Easy-peasy.

Next, I went to work and threw it onto a dummy page on our site, making sure it would play nice with all of the javascript and myriad of scripts on our site.

Busted.

Seriously, irrevocably busted.

The problem, as I researched further, was that we were using jQuery dialog code to display the map. And as Daniel Llewellyn wrote in 2011, the real issue is that if you use the "simple map" version of code at Google Map's developer page, you're calling the script before the dialog box and the result is that the API is drawing the map in a space that doesn't yet exist.

What you wind up seeing when you do call the jQuery dialog box is perhaps 1/4 of the map at best and the rest of your dialog box is just blank or a grey square.

I've seen this on other sites and as I Googled the issue, I could see that many folks were having the same issue, but absolutely none of the convoluted fixes I saw on any forum, on Stack Overflow or on Daniel's site would work for me. Being a baby developer, it's quite possible that I simply wasn't understanding their code properly, but the fix I eventually pieced together was incredibly simple.

Example of the typical implementation (new window) of a simple Google Maps with jQuery dialog box. The code for this failed implementation is below:

<p>Google Map in a <a href="#" class="mappop" id="mappop">jQuery dialog</a>.</p> <div class="popmap" id="popmap" style="display:none;" title="Map"> <div id="map_container"><div id="map-canvas" style="background-color:#cccccc;height:450px;width:500px;"></div></div>
<script>
$(function(){
$("#mappop").click(function(){
$("#popmap").dialog({dialogClass:'popmap'});
return false;
});
});
</script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
  function initialize(){
   var mapOptions = {
   zoom:16,
   center: new google.maps.LatLng(38.858834, -77.33403),    mapTypeId: google.maps.MapTypeId.HYBRID
   }
   var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   var contentString = '<div id="content">' +
   '<div id="siteNotice">' +
   '</div>' +
   '<h1 id="firstHeading" class="firstHeading" style="font-size:18px;">My Fav Dot Com - ThinkGeek HQ</h1>'+
   '<div id="bodyContent">' +
   '<p style="font-size:14px;">ThinkGeek HQ<br />11216 Waples Mill Rd. Suite 100<br />Fairfax, VA 22030</p>'
   '</div>' +
   '</div>';
   var infowindow = new google.maps.InfoWindow({
   content: contentString
   });
 

   var myLatLng = new google.maps.LatLng(38.858834, -77.33403);
   var marker = new google.maps.Marker({
   position: myLatLng,
   map: map,
   title: 'ThinkGeek HQ'
   });
   google.maps.event.addListener(marker, 'click', function(){
   infowindow.open(map,marker);
   });
  }
google.maps.event.addDomListener(window, 'load', initialize);
</script>

What. The. Hell. I used the code from Google's API directly! And of course, that's the downfall, isn't it?

As Daniel said, the code from Google calls the script and therefore the map before the dialog box is called, which means the API doesn't know where to draw the map!

While I saw tons of attempts to fix this, many of which had the original poster claiming thanks for helping out, I couldn't get any of these other solutions to work.

And that's when I quit being an idiot who just follows everyone else's suggestions and started thinking for myself. There had to be something in Google's API for asynchronous loading. Once I found that, I had most of my answer. I knew how to load the map. I knew how to call the map. Now I needed to fire the whole thing and that, given the parameters of my users' needs, was a simple onclick.  

Working map (except IE7) example (new window).

And the code:

<p>Google Map in a <a href="#" class="mappop" id="mappop">jQuery dialog</a>.</p><div class="popmap" id="popmap" style="display:none;" title="Map"> <div id="map_container"><div id="map-canvas" style="background-color:#cccccc;height:450px;width:500px;"></div></div>
<script>
   $(function(){
   $("#mappop").click(function(){
   $("#popmap").dialog({dialogClass:'popmap'});
   return false;
   });
});
</script>
<script>
   function initialize(){
   var mapOptions = {
   zoom:16,
   center: new google.maps.LatLng(38.858834, -77.33403),
   mapTypeId: google.maps.MapTypeId.HYBRID
   }
   var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   var contentString = '<div id="content">' +
   '<div id="siteNotice">' +
   '</div>' +
   '<h1 id="firstHeading" class="firstHeading" style="font-size:18px;">My Fav Dot Com - ThinkGeek HQ</h1>'+
   '<div id="bodyContent">' +
   '<p style="font-size:14px;">ThinkGeek HQ<br />11216 Waples Mill Rd. Suite 100<br />Fairfax, VA 22030</p>>'
   '</div>' +
   '</div>';
   var infowindow = new google.maps.InfoWindow({
   content: contentString
   });
  

   var myLatLng = new google.maps.LatLng(38.858834, -77.33403);
   var marker = new google.maps.Marker({
   position: myLatLng,
   map: map,
   title: 'ThinkGeek HQ'
   });
   google.maps.event.addListener(marker, 'click', function(){
   infowindow.open(map,marker);
   });
   }
function loadScript(){
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
   document.body.appendChild(script);
   }
  document.getElementById('mappop').onclick = loadScript;

And no, I don't work at ThinkGeek by a long shot. Truly, they're one of my favourite ecomm sites, so I thought I'd map them out.

Anyhow, hopefully this helps out some other neophyte who's having issues working with the Google Map API and jQuery.

Now, anyone wanna tell me how to fix it on IE7?

Posted by Red Monkey at July 7, 2013 10:07 PM | | | StumbleUpon Toolbar Stumble |

Free Pixel Advertisement for your blog