Thoughts on programming, web development and design.

Circuit Board

Tag: Google Maps

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.

jQuery and Google Maps

While looking for jQuery tutorials that were more challenging than the typical beginner tutorials, I found His now defunct developer blog has a few tutorials on jQuery. Computer with codeMarc posted one on Google Maps and jQuery. This tutorial had exactly what I was looking for. It showed a practical use for jQuery instead of how to create an animated box. Marc walks you through a step by step process of using jQuery with Google Maps. He shows you how to mashup jQuery with Google Maps to create a simple map that overwrites Google Map popups.

If you are learning jQuery and want to try a tutorial that is more challenging and fun, I suggest taking a look at jQuery and Google Maps.

Use Google Maps in ASP.Net

World Map

Image: luigi diamanti /

The .Net Developer’s Journal shows you how to build a custom server control using Google Maps and ASP.Net. Jeevan Murkoth shows you how to build a wrapper around the Google API. This techniques makes it easier for .Net developers to use the functionality of Google Maps without writing a lot of JavaScript.

Powered by WordPress & Theme by Anders Norén