JQuery Plugin: imGoogleMaps
Friday, March 13th, 2009This 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
$('#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:
$('#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:
$('#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.
$('#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.
March 14th, 2009 at 3:36 am
hi, this looks indeed very interesting, but none of your examples is actually working
March 15th, 2009 at 4:30 am
Oops. It’s working now. Go back to the demo. If you have already downloaded the plugin, then download it again.
July 16th, 2009 at 6:42 pm
How would we move the directions to below the map?
July 17th, 2009 at 5:23 pm
Create the map in manual mode and use CSS to rearrange the map elements.
September 25th, 2009 at 10:00 am
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!
October 16th, 2009 at 10:11 pm
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
November 9th, 2009 at 2:13 pm
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!
November 9th, 2009 at 2:37 pm
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.
November 10th, 2009 at 7:57 am
It worked – thanks!
November 10th, 2009 at 8:41 am
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?
November 10th, 2009 at 9:28 am
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?
November 10th, 2009 at 9:33 am
No, but thanks a lot
November 10th, 2009 at 11:00 am
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 …
November 10th, 2009 at 11:30 am
will do.
November 28th, 2009 at 11:16 am
[...] have recently been updating the JQuery imGoogleMaps Plugin that I created earlier this year. The new version of the plugin will display multiple [...]
December 24th, 2009 at 1:51 pm
[...] 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 [...]
March 8th, 2010 at 9:25 pm
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
March 8th, 2010 at 9:29 pm
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?
March 8th, 2010 at 9:33 pm
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!!!
March 17th, 2010 at 8:23 am
Joey,
Sorry for the late reply. The plugin is supposed to open a popup window, print the contents and close. I guess it’s not printing, so the best thing to do is to comment out the close method and the print manually.
Line 775: //w.close();
March 17th, 2010 at 5:30 pm
That did it! It’s funny, the print function still works fine in Chrome, it just doesn’t initiate the close for you when you print which is what I like. Unfortunately most people still use IE which means I have to strip the close() in order for it to work.
Thanks again!
March 18th, 2010 at 6:58 am
I am using jquery.imGoogleMaps-0.9.js
http://grasshopperpebbles.com/ajax/jquery-plugin-imgooglemaps/
It gets addresses from a php file in json format
The problem is:
when i put the data statically like
$json = ‘[{"address": "Valley Christian Fellowship , 974 Tillman Lane, Gardnerville, Nevada, US, 89410"},{"address": "Green Valley Baptist Church, 270 North Valle Verde Dr., Henderson, Nevada, US, 89074"}]‘;
it shows the addresses on the map correctly and map loads
but when i get the same from database
= ‘”.date(’Y-m-d’).”‘”);
$json = ‘[';
while($row=mysql_fetch_array($rs))
{
$json .= '{"address": "'.$row['fldaddr1'].’, ‘.$row['fldaddr2'].’, ‘.$row['fldcity'].’, ‘.$row['fldstate'].’, ‘.$row['fldcountry']. ‘, ‘.$row['fldzipcode'].’”},’;
}
$json=substr($json,0,strlen($json)-1);
$json .= ‘]’;
echo $json;
?>
the map is not loading at all……
the static output is from the database only…..
don’t understand what cud be wrong……
March 18th, 2010 at 7:52 am
Sandy,
Use Firebug to see what the json object that is returned to your application looks like. I think that what is being returned is not what you think. You may need to copy/paste the json object into an online parser to find out if it is malformed. It could something as simple as a comma being misplaced or perhaps an apostrophe in an address.
March 18th, 2010 at 9:38 am
gr8! thanks, i found the problem.
March 24th, 2010 at 12:17 pm
can i set a default zoom level for the map ?
March 27th, 2010 at 12:24 pm
Greetings,
I am trying to implement the code below and he/she is giving the following mistake in the compilation of the code. I am requesting help for solving the problem. Thankful. Adim.
I wander in time of execution of Microsoft JScript: The object doesn’t give support for the property or method.
#mapInfo {
float: left;
width: 640px;
color: #fff;
font: bold 11px Helvitica, Arial, sans-serif;
}
$(document).read(function() {
$(’#mapInfo’).imGoogleMaps({ address: ‘Rio de Janeiro, RJ’,
//optional
map: { “width”: “400px”, “height”: “400px” },
//optional
directions: { “background”: “#fff”, “text”: “#000″ },
//optional
menu_bar: { “background”: “#3366cc”, “text”: “#fff” }
});
});
March 27th, 2010 at 11:56 pm
The problem appears to be a typo.
$(document).read(function() {
should be:
$(document).ready(function() {
March 28th, 2010 at 11:17 am
Good afternoon and thank you!
I made the recommended correction and it continues giving the same mistake.
“I wander in time of execution of Microsoft JScript: The object doesn’t give support for the property or method”.
#mapInfo {float: left; width: 640px; color: #fff; font: bold 11px Helvitica, Arial, sans-serif;}
$(document).ready(function(){
$(’#mapInfo’).imGoogleMaps({ address: ‘Rio de Janeiro, RJ’,
map: { “width”: “400px”, “height”: “400px” },
directions: { “background”: “#fff”, “text”: “#000″ },
menu_bar: { “background”: “#3366cc”, “text”: “#fff” }
}); });
March 29th, 2010 at 12:43 am
If you copied the code exactly it may be an issue with the double quotes.
try this:
map: { “width:400px”, “height:400px” },
directions: { “background:#fff”, “text:#000″ },
menu_bar: { “background:#3366cc”, “text:#fff” }
or possibly single quotes.
If not you can always make an id within the style tags and call on it like the example.
$(document).ready(function(){
$(’#mapInfoManual’).imGoogleMaps({
map: ‘googMap’
});
});
#googMap {width:400px; height:400px;}
Either one should work.
March 29th, 2010 at 1:14 am
@Adim:
also, are you trying to make the change on the call page or in the js file?
March 29th, 2010 at 1:16 am
correction:
map: { “width:400px; height:400px” },
directions: { “background:#fff; text:#000″ },
menu_bar: { “background:#3366cc; text:#fff” }
March 31st, 2010 at 9:54 am
I’m upgrading this plugin. I’m removing the top control bar when in manual mode. I’ve added the directions search functionality to the infoWindow (when you click on a marker). Before I release the new version, I have a couple of questions:
1. In this new version, the directions container is not initially displayed (this container holds the actual text directions). A user can click on a marker and select an option to get directions from (or to) the location in the infoWindow. Once the user enters their search criteria, the directions container will appear to the left of the map. When this container appears, the map container will be moved to the right to accommodate the width of the directions container.
My question is whether I should keep this functionality (the map container moving to the right) or should the directions container appear in a popup.
I don’t generally like popups, but, depending upon how you design your page, you may not have enough space for the map to slide to the right.
2. Is there any other functionality that you would like to have added to the upgrade?
Thanks.
April 20th, 2010 at 8:14 pm
I’m not a huge fan of pop ups either, but considering the room I have to work with on some sites, I think it’s probably a must. If you decide to leave it out I can always just use target=_blank to do the trick.
May 4th, 2010 at 5:45 am
Hi! Thanks for this great-great plugin! I have a question…Because Geocode doesn’t find my exact address, is there any way to use my specific longitude & latitude values? Thanks!
May 7th, 2010 at 7:00 pm
Yes.
{”lat”: “40.730885″, “lng”: “-73.997383″}
May 18th, 2010 at 12:49 am
Any way to pre-populate the “from” address?
June 25th, 2010 at 6:27 am
Hi !
Thanks for this great plug-in!
I am trying to set zoom level.How should I go about it?
this is my code:
$(document).ready
(function(){
$(’#googMap’).imGoogleMaps({
address: ”,
map: ‘googMap’,
directions: ‘googDir’,
menu_class: ‘googControls’,
print_class: ‘googPrint’,
search: ‘googSearch’,
button_class: ‘button’,
mode: “manual”,
show_directions_menu: false,
street_view: ’street_view’,
street_close_loc: ‘/img/close_btn.gif’
});
});
you can also look into:
http://barcelonaparts.com/apartment.php/Bac-de-Roda/1123
Any help would be appreciated!
Thank you.
June 30th, 2010 at 10:53 am
Ori,
The zoom is set automatically. It is determined by the lat/lng of the markers on the map.
If you think that it is not calculating the zoom level correctly, then I can look into it. If you want me to look into it, then you have to provide me the scenario for which it is not calculating correctly. Thanks.
June 30th, 2010 at 2:50 pm
I dont understand exactly what do you mean when you say:”you have to provide me the scenario for which it is not calculating correctly¨.no meter which page I open its always on maximum zoom.
ex:
http://barcelonaparts.com/apartment.php/Liceu-apartment/1108
I will be happy to provide every info that you may need..
Thanks.
Ori
June 30th, 2010 at 2:59 pm
Ori,
That’s what I needed to know. So the scenario is (at least what I think you are saying) that when displaying a single address the map is set to maximum zoom. I’ll look into it. I may add a zoom option for the next release.
June 30th, 2010 at 4:04 pm
That would be nice! Having it zoomed out just a little makes it more appealing to look at because you can see a few roads and intersections.
June 30th, 2010 at 4:16 pm
Indeed Joey..and in general it would be nice that the administrator of the page can decide what zoom level he want.
I actually had another problem with the address,maybe someone can help..
I do not want the user will be able to see the exact address(this is wanted for security reasons).When the user click the marker a balloon appears with the address and a link for the street view.For the moment I solved that using CSS, but still its a bit wired that user click the marker and he gets a link for the street view(which appear in the map top menu) and nothing more…
any advise will be appreciated.
Ori
June 30th, 2010 at 4:38 pm
The street view button on the map only enables the street view lines (the blue lines on the map). The Street view link, allows the user to view the street for the marker location. I have already separated the street view option from the street view button option. This will be available in the next release.
As far as not seeing the exact address in the info window, I don’t understand the purpose of showing markers on a map if the address isn’t available (isn’t that the primary purpose of Google Maps?) If there is a consensus that this should be an option, then I will add it.
BTW, in the next release, I am removing the ‘get directions’ options from the interface and adding it to the info window. I’ve already removed it from a map created with manual mode – I haven’t yet decided to whether to remove it from the auto mode map.
June 30th, 2010 at 4:54 pm
Hi!
As I said The not showing address option is needed for security reasons both for apartments owners safety and clients safety(in this specific web) and besides I think its a good concept letting the a web page owner the privilege to determine the amount of info reviled in he´s site.
Ori
July 14th, 2010 at 8:46 am
Hi there!
Just wondering when the new version will come out…my employers want to know when problems are going to be solved..
Many Thanks
Ori