- #BRACKETS TEXT EDITOR CANNOT RENDER GOOGLE MAPS API CODE#
- #BRACKETS TEXT EDITOR CANNOT RENDER GOOGLE MAPS API FREE#
It's worth noting that Opera's keyboard navigation scheme is different from that of other browsers. As used here, divs cannot receive focus, so a keyboard user doesn't get a chance to navigate or activate these controls when using the Tab key. In HTML, the only elements that can receive keyboard focus (or, to put it another way, the only elements that get included in the browser/user agent tab cycle) are links, image map areas, and form elements.
#BRACKETS TEXT EDITOR CANNOT RENDER GOOGLE MAPS API CODE#
Looking at the code that Google generates for the various controls, it quickly becomes apparent why they are not keyboard accessible. Similarly, the map type controls can be found in the following block of markup: The relevant onclick behaviour (which triggers the actual map functions like panning and zooming) is added by Google's script after the divs have been generated.įigure 2: The single PNG image used to display the pan/zoom controls A single PNG image (see Figure 2) is used to give the visual appearance of the control buttons, while the actual clickable areas are transparent div elements that are absolutely positioned on top of the image, coupled with some CSS to change the mouse to a hand icon ( cursor: pointer). This block is responsible for generating the pan/zoom controls. Unless you're a masochist, I would not recommend trying to make sense of all that you will find there, but to explain the coming steps, it's worth pointing out some blocks of code (with areas of interest highlighted for slightly better readability). Once Google's script is run, the content of is replaced with a large amount of markup for the various map tiles and controls. Using a tool such as Opera Dragonfly (access it in the latest version of the Opera browser by activating the context menu and choosing Inspect Element) you can get a rough idea of what's going on-see Figure 1.įigure 1: Opera Dragonfly, showing an extract of the DOM generated by the Google Maps API However, if you try using the keyboard to Tab to the individual controls (apart from the Powered by Google and Terms & Use links), you're out of luck-there's nothing else that can receive focus via keyboard interaction. It functions perfectly well when using your mouse and scroll wheel to move around, zoom or switch map types. Map.setCenter(new GLatLng(53.480998, -2.236748), 15) Īt this point, we have a standard Google Map. Var map = new GMap2(document.getElementById("map_canvas")) We'll also enable use of the scroll wheel and continuous zoom: Next, we'll use the "regular" Google Maps API to replace the static contents of the container div with a dynamic map, including large pan/zoom and map type controls. In the absence of JavaScript, this provides users with a basic fallback: We'll begin by using the lesser-known Google Static Maps API to place an image of our desired starting map on a page, wrapped in a simple container div. To understand the problem of keyboard access, let's use Google's own example code as a starting point to display a map of Manchester, England.
Now, let's say that you want to make your map a tad more accessible but without changing the look and feel of your existing map (maybe because your boss or designer insists on it)- a case of unobtrusive accessibility, if you will.Īdded 15 June 2010: Since this article was written, version 3 of the API and version 2 of the Static Maps API no longer require API keys. I'll assume that you're familiar with the basics of Google Maps, have obtained your API key, and implemented a map on your site. In this article, we'll examine the problem and, step by step, make our way toward a possible solution. Unfortunately, out of the box, these maps are reliant on mouse interaction therefore, they are completely inaccessible to those using only the keyboard for Web interaction.
#BRACKETS TEXT EDITOR CANNOT RENDER GOOGLE MAPS API FREE#
Google Maps is a powerful, free tool for adding maps to a site.