Code Challenge

Fred Boyle challenged developers to build something, an app, in a language that they don’t normally use. Normally, I program in ASP.Net, C# and MS-SQL. For this code challenge, I decided to learn more about Google Maps and JavaScript.

I used a tutorial on jQuery and Google Maps as a starting point. Google Maps is now on version 3, not version 2 (which the tutorial uses). I picked the locations from a paper map that shows some shops in downtown Burlington, Wisconsin.

While developing the page, I ran into two issues: Missing Marker and Multiple InfoWindows not displaying.

Missing Marker
I had 11 shops and only 10 were showing up on the map. After removing most of the locations, I got the missing one to show up. I discovered that two shops share the same location (building) which means they have the same longitude and latitude. In order to show both, I had to change to code to place both shops on the same marker.

Multiple InfoWindows not displaying
I wanted to add InfoWindows so you could learn a little more about the shop. With Google Maps API V3, I ran into a problem with multiple InfoWindows. It would only show the last InfoWindow, no matter which marker I clicked on. After researching Google, I found Google Maps API V3 Multiple Markers, Multiple Infowindows. Colin Wiseman walks you through the problem and provides you with a solution. I used his solution to fix this issue.

Transform WordPress to Use HTML5

HTML5Smashing Magazine’s Richard Shephard walks you through transforming the theme TwentyTen to use HTML5 tags. In Using HTML5 to Transform WordPress’ Theme Twenty Ten, he explains that many developers are not designing in HTML5. He also argues that people who turn off JavaScript are less than 1.5%. If you don’t use JavaScript because of people who might turn it off, than you are limiting your designs. A web page can consist of HTML, CSS and JavaScript in order to provide an enjoyable experience for your users. Richard shows you by dividing his tutorial by HTML5 tags and providing examples. Why not use JavaScript, HTML5 and CSS to make better websites?