Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission  (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

JQuery Plugin: imGoogleMaps

Friday, March 13th, 2009

This Plugin has been updated. See imGoogleMaps 0.9 – Multiple Addresses, Street View

Although there are other JQuery plugins that enable a developer to integrate Google maps API into websites, I wanted to create a simpler implementation, one that did not have all the options, only the basics. I think that in most situations, a website owner only wants an end-user to be able to view the owner’s address and be able to map directions to that address. In addition, I wanted a plugin that displayed a map interface that is similar to what one would see on Google Maps (auto mode) while also giving the developer the ability to style their own interface (manual mode). This plugin will also display certain Google Map errors codes. In addition, this plugin will allow you to use Ajax to retrieve an address as well as Reverse Geocoding.

Before using the imGoogleMaps plugin, you first need to get an API key for Google Maps. You can obtain a key from here.

Next, download the imGoogleMaps plugin (the plugin can be downloaded from Google Code or JQuery Plugins).

Setup:

This plugin has two modes: auto and manual. There are 5 components used in the plugin interface (regardless of the mode):

Interface Container: This container will hold all the other components of the plugin.
Menu Bar:
The menu bar will display the “Get Directions”, “Print Map” and “Print Directions” menu items.
Search Container: The “From” and “To” address input fields and a search button.
Directions:
As you may have guessed, the directions will be displayed on this element.
Map Container: container for the map.

Auto Mode:
The plugin is set to “auto” mode by default. In “auto” mode, you only have to style the Interface Container for the plugin. Style the container to your liking. I generally don’t set a height, as the height will be set by the other elements within the container. The following is the div style that I used in the “Auto Mode” demo. You will find that you still have a lot control over the look and feel of the plugin in auto mode.

#mapInfo {
     float: left;
     width: 640px;
     color: #fff;
     font: bold 11px Helvitica, Arial, sans-serif;
}

Using The Plugin

?View Code JAVASCRIPT
$('#mapInfo').imGoogleMaps({
     address: ‘Cheyenne Mountain Colorado Springs, CO’,
     //optional
     map: {“width”: “400px”, “height”, “400px”},
     //optional
     directions: {"background": "#fff", "text": "#000"},
     //optional
     menu_bar: {"background": "#3366cc", "text": "#fff"},
});

Options:
Note: the directions and menu_bar options are optional. If not set, each will default to a white background with black lettering.

Interface Container: In this case, “#mapInfo”.

Address: The initial address to be mapped. Note: In the example above, the address is of Stargate Command. I really wanted to map the address of the “Lost City”, but apparently, the address can’t be mapped. Interesting…

Directions: In auto mode, this div will be styled automatically. The background and text colors can optionally be entered. The default setting is:

{”background”: “#fff”, “text”: “#000″}

The directions option should adhere to the following format:

{“background”: “#color”, “text”: “#color”}

Map Container: {“width”: “..px”, “height”: “..px”}. This is optional. The default setting is: width: 400px, height: 400px;

MenuBar: In auto mode, this div will be styled automatically. The background and text colors can optionally be entered. The default setting is: {”background”: “#3366cc”, “text”: “#fff”}

As with the “directions” option, the menuBar option should adhere to the following format:

{“background”: “#color”, “text”: “#color”}

Manual Mode:

?View Code JAVASCRIPT
$('#mapInfoManual').imGoogleMaps({
         address: ‘Cheyenne Mountain Colorado Springs, CO’,
         map: 'googMap',
         directions: 'googDir',
         menu_class: 'googControls',
         print_class: ‘googPrint’,
         search: ‘googSearch’,
         button_class: 'button',
         mode: "manual"
});

You have a bit more control of the design in “manual” mode. As with “auto” mode, you style the Interface Container (in this case, “#mapInfoManual”). But you also have the ability to style the other components within the plugin.

Note: While you do not have the ability to change the layout, you have the ability to add borders, add and image gradient to the background of a component, etc.

Address: From a value on the page
map: ID Selector
directions: ID Selector
menu_class: Class Selector
print_class: Class Selector – the print control container (Print Directions and Print Map links)
search: ID Selector – the search container. This holds the From and To fields.
button_class: Class Selector – the style of the search button.
mode:
“manual” – this is mandatory for manual mode

Ajax Address Retrieval Option

In both auto and manual mode, the value for the initial address can be retrieved Ajaxally using a ‘Get’. So instead of using the “address” option, you could do the following:

?View Code JAVASCRIPT
$('#mapInfo').imGoogleMaps({
        data_url: '../includes/controllers/dbActionController.php',
        data: [{name: "action", value: "doGetAddress"}, {name: "page", value: "venues"}, {name: "venue_id", value: vid}, {name: "lookup", value: "states"} ],
        //optional
        map: {“width”: “400px”, “height”, “400px”},
        //optional
        directions: {"background": "#fff", "text": "#000"},
        //optional
        menu_bar: {"background": "#3366cc", "text": "#fff"},
});

data_url: The URL where you will retrieve the address
data: Any data that you want to send to the data_url. The format for this option should be:

[{name: "name1", value: "value1"}, {name: "name2", value: "value2"}, etc. ]

The options will be converted into name=value pairs and sent to the data_url. The data returned should be of type text.

Reverse Geocoding:

Another way to map an address using this plugin is by using reverse geocoding above. Just supply the Latitude and Longitude and the address (if known) will be displayed on the map.

?View Code JAVASCRIPT
$('#mapInfo').imGoogleMaps({
        lat_lng: {“lat”:0.232, “lng”:454}
        //optional
        map: {“width”: “400px”, “height”, “400px”},
        //optional
        directions: {"background": "#fff", "text": "#000"},
        //optional
        menu_bar: {"background": "#3366cc", "text": "#fff"},
});

Error Codes

The imGoogleMaps plugin will also display the following Google Map errors:

G_GEO_UNKNOWN_ADDRESS: No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\
G_GEO_UNAVAILABLE_ADDRESS: The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.
G_GEO_SERVER_ERROR: A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known
G_GEO_MISSING_QUERY: The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.
G_GEO_BAD_KEY: The given key is either invalid or does not match the domain for which it was given.
G_GEO_BAD_REQUEST: A directions request could not be successfully parsed.

Click here to view demos of the imGoogleMaps plugin.

Related posts

19 Responses to “JQuery Plugin: imGoogleMaps”

  • Michael Says:


    hi, this looks indeed very interesting, but none of your examples is actually working :(
  • admin Says:


    Oops. It’s working now. Go back to the demo. If you have already downloaded the plugin, then download it again.
  • James Says:


    How would we move the directions to below the map?
  • admin Says:


    Create the map in manual mode and use CSS to rearrange the map elements.
  • neal Says:


    the example usage code above contains errors. took me a while to find them (i spent hours trying to resolve what i thought was a conflict between this and other scripts before i noticed it!)

    if copying and pasting the code above (as i and many others tend to do before modifying it to my needs) then also do this:

    replace the formatted apostrophes & quotation marks with standard ascii quotation marks and replace the comma between height & 400px with a colon:

    address: ‘Cheyenne Mountain Colorado Springs, CO’,
    map: {”width”: “400px”, “height”: “400px”},

    ah, it might be a wordpress thing, i just pasted the code correctly & it inserted formatted quotation marks all by itself!

  • admin Says:


    Yeah, wordpress does some funny things to code at times. Get the code from the demo page: http://grasshopperpebbles.com/demos/index.php/welcome/index.

    Les

  • metamurks Says:


    Hi,

    I’m currently working on a little project involving your plugin but I have a problem: How can I always display the search form without clicking on ‘Get directions’?

    I’m new to javascript/jquery and don’t know how to solve this problem.

    Thanks in advance and thanks for this plugin!

  • admin Says:


    I haven’t tried it. You will have to use the plugin in manual mode. In the demo example, the container for the search form is named googSearch. In the styling for this container, I set display = none. If you remove this attribute. Then the search screen should automatically display. Let me know if this helps. I can modify the plugin, if necessary.
  • metamurks Says:


    It worked – thanks!
  • metamurks Says:


    Ok, now I have another problem – if I perfom a search in manual mode and press the ‘Get Directions’ button no directions get calculated/are displayed (in your demo too).

    Do you know how to fix this?

  • admin Says:


    Good catch. I found the problem and will have it fixed shortly. I’m also adding an option for manual mode so the ‘Get Directions’ menu item will not appear (if your form is already visible, then the menu item is not needed). Any other requests?
  • metamurks Says:


    No, but thanks a lot :)
  • metamurks Says:


    Sorry to bother you again and spamming this comment section, but I got another request after fiddling with the plugin and the source: getting the directions after pressing the enter key, either in the ‘From’ or ‘To’ field without clicking the button.

    I found some solutions, but couldn’t fix it by myself …

  • admin Says:


    will do.
  • Google Maps: Using JQuery to Display Multiple Addresses | GrasshopperPebbles.com Says:


    [...] have recently been updating the JQuery imGoogleMaps Plugin that I created earlier this year. The new version of the plugin will display multiple [...]
  • JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View | GrasshopperPebbles.com Says:


    [...] finally found the time to upgrade imGoogleMaps JQuery plugin. When I first began the upgrade, my plan was to only add the handful of items that [...]
  • Joey Says:


    is anyone having a problem with the print directions and print map in browsers other than Chrome. They do not pop up and allow you to print. I have tested it in IE7, Opera, FF without success
  • admin Says:


    I haven’t heard, but I can look into it. I need a bit more information. Are you using manual mode or auto? Also are you trying to print the map or directions?
  • Joey Says:


    using manual mode. The new window pops up for a split second and then disappears. You can tell that the call was successful because you see the information, the window just doesn’t stay open for you to print. I thought it might have just been a security issue, so I turned everything off and tried without success. Your demo does the same thing (just checked it because I changed some of the js). I do have it on a remote server so it’s not a local server issue. Thanks for taking the time to look at the problem! I do love the plugin!!!

CommentLuv Enabled