Mashup

GMap Double Click Event Fired When Double Clicking on Markers in Firefox

According to the Google Map's documentation, a doubleclick event should not be triggered on the GMap object when it occurs on a marker : "This event is fired when a double click is done on the map. Notice that this event will not be fired if the double click was on a marker or other clickable overlay. " But I am finding in Firefox 3.0.5 on both Windows and Linux, the event is triggered when clicking on a marker, which results in centering the map. This does not occur in IE7 on Windows. It's not a huge deal, but I have attached event listeners to markers so I could delete them when a user double clicks. They do in fact get deleted in Firefox, but the maps also centers on where the user clicked, which isn't what I want.

I am using custom icons and thought that might be the problem, so I went with the standard icon but the problem persists. I searched GMaps issues and sure enough, if your marker is set to be draggable, the event will pass through to GMap and center in Firefox.I tried to mess around with the code and see if I could find a hack to fix it, but nothing worked. Might be able to "un-center" the map by keeping trac of the events fired, as the marker doubleclick always came first in when I was debugging. But it's probably not worth it...

Posted In: firefox, Mashup | No Comments

Google Maps and CSS/Javascript Drop Down Menus

Twice in one week I ran into the same problem. I put Google Maps on a webpage, only to find that the drop down navigation menu went behind the map. One navigation was nested ul's with CSS for formatting and a small piece of unobtrusive JavaScript to deal with IE's problem on not recognizing :hover on non "a" tags (suckerfish), while the other had JavaScript sprinkled into the code and a fairly complex script that animated the dropdown menu (slide effect).

The solution, which worked on Internet Explorer and Firefox, was to apply a style of "z-index:9999" to the dropdown menus. I had apply that style to a number of divs in the javascript powered menu, as putting it on the top container, which was a table, didn't seem to work. On the CSS menu, I used a selector to apply the z-index to all the uls in my nav, and it worked like a charm. Of course you don't have to use a value of "9999", just a number sufficiently high to prevent something else from appear above it.

Posted In: JavaScript, Mashup | 27 comments

Google Map Gotchas

I have been doing some work with Google Maps and found an informative website that helped solve some problems. My first problem was that the info window displayed above my marker was too big, with a lot of extra space at the bottom. It turns out, the info box is created by Google’s javascript based on how large it thinks the text is. Cascading styles, such as those applied to a container div, are not rendered on the text until the size of the info window has already been calculated. You can wrap the content in the info window with a span or div and re-apply the styles (really only size / padding / margin would make much of a difference) to that div/span and the extra space disappears.

The other issue I ran into was how to get the overview map, which appears on the lower right hand side. The GOverviewMapControl is does the trick, and I couldn’t find any reference to it in the Google Maps class reference. You can set the size by passing a GSize object in the constructor.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GOverviewMapControl(new GSize(200,200)));

Posted In: Mashup | No Comments

Ask Maps API

I am working on a new application and I will make use of a mapping API from one of the search engines. In researching the different maps and their respective API’s, I was disappointed to find out that ask.com doesn’t have an API for their maps. Ask seems to have the best satellite data for my application, which is focused on rural areas, but alas, I can’t make use of it. I understand that it takes significant amount of work and resources to produce an API that can withstand the demands of thousands of external applications. Seeing how much money ask.com has spent on advertising recently, I think they would get a better bang for their buck on a map API than on commercials. Matt Cutts posted a graph from Alexa that indicates they didn’t receive a traffic spike from the commercials.

Think about the boost they would get if thousands of mashups are created using Ask’s maps. First, people would become accustomed to using the interface and familiarity begets use. Secondly, a portion of those applications would send traffic directly to Ask maps (driving directions, etc..), making them more likely to use the Ask search engine in the future. So how about Ask, where is the API?

Posted In: Mashup | 3 comments