JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View
Thursday, December 24th, 2009I 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 were requested by a few users (and fix a few bugs). When the upgrade was complete, I had incorporated the GStreetviewPanorama object and Street View Overlay into the plugin. I also added the ability to plot multiple addresses ajaxally via a json object and add a business name to the infoWindow.
Quick Overview – 0.5 Version
The imGoogleMaps plugin has two modes – auto mode and manual
mode. Auto Mode First you define a container for the map interface: Then you use the imGoogleMaps plugin to add the map interface to the container: You can optionally add a few other options to the plugin (map dimensions, directions background and text color, and menu bar background and text color). Manual Mode When then use each style as options in the map interface. Remember to set the mode to manual (the default mode is ‘auto’): When I upgraded the plugin, I fixed a few minor bugs. I also added a few niceties: Plotting multiple addresses on a Google Map is one of the major upgrades of the plugin. The addresses can be loaded via ajax using the data_url option. Although a single address can be loaded as text (the default), to load multiple addresses on the map, the data format must be json (set the data_type option to ‘json’). The json object can optionally be loaded via the address option of the plugin. imProgressBar I received an error when testing the plugin with more than 10 addresses. After some searching, I found that Geocode requests are limited to about 15000 per IP address per day (about 1 every 5.76 seconds). Because of the limitations, I added a new option to the imGoogleMaps plugin: geocode_request_rate The default value for this option is 500 (0.5 secs). This will cause the plugin to make a Geocode requests once every 1/2 seconds. If you have more than about 10 addresses, you should set this rate at a higher value. In the demos, I set the rate to 5000 (5 secs). Setting the request rate to a higher value causes the imGoogleMaps plugin to appear inactive to the user, so I incorporated the imProgessBar plugin into imGoogleMaps. To set this option, you must supply the progress bar container id , progress bar back class, and the progress bar class. The imProgressBar comes with a number of bar images for you to use (I’ll discuss the imProgressBar plugin in more detail in a later post). Before using the imProgressBar, you mus first style it: Now, add the option to the plugin: Incorporating the GStreetviewPanorama into the plugin was probably the most time-consuming aspect of the upgrade. The Panorama itself was not difficult, but finding a way to switch back to the map. On Google Maps, Google added an ‘X’ on the top right of the Street View Panorama in order to allow the user to close the panorama and return to the map, but they have not provided developers a way to do the same thing. I finally found a way around it. Once Google gives developers access to the StreetPanorama, I will upgrade the plugin. In order to display the StreetViewPanorama, you have to set two options: The street_view div is styled the same as the map div. The only difference is the height of the street view div is a bit smaller to accommodate the height of the close button. Also, the id name of the close button container can’t be changed (but the styling can be). Note: The plugin will know to include a StreetViewPanorama if the id for the street_view is supplied. When this option is supplied a custom Street View button will also be displayed on the map. When the button is clicked, the Street View Overlay will be applied to the map. I will create a later post that discusses how I created a custom control. To display street view in the imGoogleMaps plugin: An additional upgrade to the plugin is the ability to display a name (business name) above the address in the infoWindow. In order to display the name, a ‘name’ option should be added to the json object that is loaded via the data_url (or address option): You can style the name in the infoWindow by setting the ’span.imBusinessName’ class. The plugin can be downloaded from JQuery’s Plugin Repository or Google Code. You can view demos of the imGoogleMaps Plugin on the demo section of my site.
In auto mode, enter and address that you want plotted and the Google Map will be built for you. #mapInfo {
float: left;
width: 640px;
color: #fff;
font: bold 11px Helvitica, Arial, sans-serif;
margin-left:50px;
}
$(document).ready(function(){
$('#mapInfo').imGoogleMaps({
address: 'Cheyenne Mountain Colorado Springs, CO'
});
});
$(document).ready(function(){
$('#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"}
});
});
Manual mode gives you much more flexibility as you can define each component of the map interface via CSS./* map interface container */
#mapInfoManual {
float: left;
color: #fff;
font: bold 11px Helvitica, Arial, sans-serif;
width:807px;
background-color:#000;
}
#mapInfoManual a {
text-decoration:none;
margin-left:5px;
line-height:26px;
color:#fff;
}
/* map container */
#googMap {
float:right;
width:500px;
height:400px;
border: solid thin #fff;
color:#000;
}
#googMap a {
color:#0000ff;
}
/* google directions container */
#googDir {
float:left;
width:300px;
height:400px;
background-color:#000;
color:#fff;
overflow: auto; /*used to scroll */
margin-right:2px;
border: solid thin #fff;
}
/* google menu item styles - directions, print */
.googControls {
float:left;
width:100%;
height:30px;
background-color:#000;
margin-bottom:2px;
border: solid thin #fff;
}
.googControls ul {
margin: 3px 0 0 3px;
padding-left:0;
float:left;
display:block;
width:200px;
list-style:none;
}
.googControls li {
display:inline;
margin: 0 10px 0 0;
}
.googPrint {
float:right;
text-align:right;
}
#googSearch {
float:left;
min-height:100px;
width: 300px; /* should be the same width as googleDirections*/
background-color:#000;
margin-bottom: 2px;
display:none; /* this is always the initial state */
padding-top:0;
border: solid thin #fff;
}
#googSearch input {
width: 175px;
float:left;
margin:8px 0 0 3px;
fontSize:11px;
width:175px;
padding:0;
}
/* Get Directions buttton */
.button {
float:right;
margin: 8px 15px 3px 0;
width:95px;
}
/* infoWindow display text */
p.infoWindowStreetAddress {
color:#000;
font-size:11px;
}
$(document).ready(function(){
$('#mapInfoManual').imGoogleMaps({
address: '1230 Wilson St, Palo Alto, CA 94301, USA',
map: 'googMap',
directions: 'googDir',
menu_class: 'googControls',
print_class: 'googPrint',
search: 'googSearch',
button_class: 'button',
mode: "manual"
});
});
imGoogleMaps 0.9
$(document).ready(function(){
$('#mapInfoManual').imGoogleMaps({
address: '17th St NW & Independence Ave Washington, DC 20006',
map: 'googMap',
menu_class: 'googControls',
print_class: 'googPrint',
mode: 'manual',
show_directions_menu: false
});
});
Multiple Addresses
$(document).ready(function(){
$('#mapInfoManual').imGoogleMaps({
data_url: 'my_addresses.php',
data_type: 'json',
map: 'googMap',
menu_class: 'googControls',
print_class: 'googPrint',
mode: 'manual',
show_directions_menu: false
});
});
$json = '[';
$json .= '{"address": "Capitol Building, Washington, DC"},';
$json .= '{"address": "Constitution Ave NW & 15th St NW Washington, DC 20024"},';
$json .= '{"address": "17th St NW & Independence Ave Washington, DC 20006"},';
$json .= '{"address": "Lincoln Memorial Cir SW Washington, DC 20037"},';
$json .= '{"address": "Constitution Ave NW & Henry Bacon Dr NW Washington, DC 20001"}';
$json .= ']';
echo $json;
#imProgBarCntnr {
float:left;
width:200px;
height:20px;
}
.imBarBack {
float:left;
width:150px;
height:18px;
background-color:#d8d8d8;
}
.imProgBar {
float:left;
height:18px;
background: url(improgressbar/images/bar_sky_blue.jpg) repeat-x;
}
$(document).ready(function(){
$('#mapInfoManual').imGoogleMaps({
data_url: 'imgooglemaps/multiple.php',
data_type: 'json',
map: 'googMap',
menu_class: 'googControls',
print_class: 'googPrint',
mode: "manual",
show_directions_menu: false,
progress_bar: {container: 'imProgBarCntnr', bar_back_class: 'imBarBack', bar_class: 'imProgBar'},
geocode_request_rate: 5000
});
});
Street View
#googMap, #street_view {
float:right;
width:650px;
height:400px;
border: solid thin #fff;
color:#000;
}
#street_view {
/* height is map height - imStreetViewClose height*/
height:382px;
display:none;
}
/* holds the close button. id name can't be changed*/
#imStreetViewClose {
float:right;
width:650px;
height:18px;
text-align: right;
display: none;
padding-right:3px;
}
$(document).ready(function(){
$('#mapInfoManual').imGoogleMaps({
data_url: 'streetview.php',
data_type: 'json',
map: 'googMap',
menu_class: 'googControls',
print_class: 'googPrint',
mode: 'manual',
show_directions_menu: false,
street_view: 'street_view',
street_close_loc: 'images/close_btn.gif'
});
});
$json = '[';
$json .= '{"address": "1213 U St NW Washington, DC 20009", "name": "Ben\'s Chilli Bowl"},';
$json .= '{"address": "1100 Florida Ave NW Washington, DC 20009", "name": "Florida Avenue Grill"},';
$json .= '{"address": "50 Massachusetts Ave NE Washington, DC 20002", "name": "B Smith\'s"},';
$json .= '{"address": "1652 K St NW Washington, DC 20006", "name": "McCormick & Schmick\'s"},';
$json .= '{"address": "1801 Connecticut Avenue NW Washington, DC 20009", "name": "Ruth\'s Chris Steak House"}';
$json .= ']';
echo $json;
span.imBusinessName {
color:#ff6600;
font: bold 16px Helvitica, Arial, sans-serif;
}
December 24th, 2009 at 5:20 pm
[...] JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View [...]
January 8th, 2010 at 11:32 am
L.S.
Great plugin. Very convenient.
It’s not clear to me if you also allow marker placement via lat/long. This would circumvent the GEOcoding lookup limitations (and the combo of maker placement based on address and known lat/long is actually what I need).
J
January 8th, 2010 at 11:59 am
In the 0.5 version, the geocoding was used for addresses only. In this version (0.9.2), both lat/long’s and addresses use the same process. The 0.5 version does not have the multiple addresss capability. I’m working on 0.9.3 because of a problem with markers not displaying in IE. I would consider changing the lat/long so that it doesn’t use geocoding. The 0.5 version displays lat/longs in the infoWindow (when mapping using lat/long). This is not very helpful to the average user. Would you want an option to display something other than the lat/long in the infoWindow (or perhaps a combination: lat/long + …)?
January 8th, 2010 at 5:21 pm
Love the plugin, I have been able to make the Auto and Manual modes work great, but as soon as I try to load a JSON record it craps out on me.
I’ve tried two different web servers, thinking the first one couldn’t server JSON properly. But neither have worked… I wasn’t sure if I was getting something wrong so I copied the entire source from your Streetview demo page and saved it to my server (changing the maps api key of course) and the map still won’t load.
Any ideas why this might be happening (er, not happening)? Have a look at the website link I included above.
Best Regards,
Mat
January 9th, 2010 at 11:41 pm
I added version 0.9.2. This includes custom marker icons and version 0.9.3 which includes the ability to add images to the infoWindow.
http://grasshopperpebbles.com/ajax/jquery-plugin-imgooglemaps-0-9-2-custom-marker-icons/
January 11th, 2010 at 12:39 pm
I’m getting a php error on your version. My demo site was created using CodeIgniter and your site is looking for a php var that is not present. Can you create an example that does not use my site, so that I can try to debug your code? Your example is not loading the json file. I’m not sure if it is because of the PHP error or if there is some other problem. Thanks.
January 12th, 2010 at 8:43 am
[...] JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View [...]
February 3rd, 2010 at 5:59 am
[...] imGoogleMaps Documentation » [...]
February 7th, 2010 at 3:56 pm
[...] imGoogleMaps Documentation » [...]
March 5th, 2010 at 2:58 pm
Hi,Great!! thanks!! one small problem…When i change to street view then I cant change back to normal mode(all the streets get colored blue and it´s stay like that.)possible to fix?
March 6th, 2010 at 12:57 am
Do you have the latest version of the plugin? When you click on the street view button again, the blue lines will be removed.
Look at the street view demo
March 6th, 2010 at 9:00 am
Hi!
Ye i am using the 0.9…I saw in the demo..I am new user of jquery so not every thing is clear for me..sorry..I am using this function parameters:$(document).ready
(function(){
$(’#googMap’).imGoogleMaps({
address: ‘echo $ address(with php,works fine),
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’
});
});
Its a bit different as i am using only one address..What am I doing wrong?any help will be appreciated..
March 6th, 2010 at 9:03 am
If its not clear i get the address with php which works fine.Thanks
March 14th, 2010 at 7:07 am
Great script, got it working beautifully in Firefox and then when I went to IE and Safari I found that the map wouldn’t show up at all. I went completely back to the basic example and I still couldn’t get it to show up in the other browsers. Any ideas on what I might be doing wrong?
Cheers ~Jules
PS –In the example code for Manual Mode you’ve got double quotes – mode: “manual”
March 17th, 2010 at 8:18 am
Jules,
I’m not sure why you can’t get it to display correctly in other browsers. Turn on the Developer tools in Safari (and IE8) to see what error is displaying. If you receive an error, let me know what it is and I will probably be able to tell you what is wrong with your setup.
March 31st, 2010 at 9:56 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 14th, 2010 at 12:19 pm
Hi!
this is great and working very well.
One thing: I cannot seem to get the Json datatype to work with the address parameter. So I do not want to load the multiple addresses from a url, but just add them as a string (in the address parameter, I presume).
You state that this is possible, I just can’t seem to find how. Can you help?
Thanks,
Yell
April 19th, 2010 at 9:26 am
Thanks for the plugin. Could you tell me the format for the JSON to get multiple locations by long/lat please?
Thanks
April 20th, 2010 at 8:26 am
Just add the json object to the address parameter. It is the same structure as if you were loading it from a url.
April 20th, 2010 at 8:30 am
[{lat: 'lat1', lng: 'lng1'}, {lat: 'lat2', lng: 'lng2'}, etc.]
Admittedly, I haven’t done a lot of testing with multiple lat/lngs, so let me know if you have any problems.
July 5th, 2010 at 3:54 pm
Hi!
I have the same problem as Yell, and after your reply I still can not figure out how to pass multiple address (and if possible the custom marker parameters) with a string without using JSON/PHP…
$(document).ready(function(){
$(”#mapInfo”).imGoogleMaps({
“address”: “1213 U St NW Washington, DC 20009″},
{”address”: “Cheyenne Mountain Colorado Springs, CO”});
});
could you please provide an example (if possible also with the custom marker parameters).
Thanks!
July 5th, 2010 at 6:00 pm
When creating a multi-record json object, you have to place the square brackets [ ] around the object (it’s an array of elements – Json.org):
[{
“address”: “1213 U St NW Washington, DC 20009″},
{”address”: “Cheyenne Mountain Colorado Springs, CO”}]
July 6th, 2010 at 2:49 pm
Thanks for your quick reply!
I get an alert saying “Address must be specified”
$(document).ready(function(){
$(”#mapInfo”).imGoogleMaps(
[{"address": "1213 U St NW Washington, DC 20009"},
{"address": "Cheyenne Mountain Colorado Springs, CO"}]
);
});
Could you please point me to the syntax error?
Thanks!
Juan
July 6th, 2010 at 8:24 pm
$(document).ready(function(){
$(”#mapInfo”).imGoogleMaps({
address: [{"address": "1213 U St NW Washington, DC 20009"},
{"address": "Cheyenne Mountain Colorado Springs, CO"}]
});
});
July 7th, 2010 at 1:02 am
Great, Thanks! I will play with that!!
July 7th, 2010 at 4:51 pm
It works perfectly! Thanks!
Congratulations for the plugin! It does exactly what I need