Google Maps jQuery Plugin
Doing a little bit of self promotion here, in hopes of getting some notice for my first jQuery plugin.
I decided to create a Google Maps plugin and carry over many of the different features that the Google Maps API offers in jQuery form. The goal of this plugin was to make a quick and easy way for someone to implement a Google Map on their page with minimal to intermediate experience.
This plugin has many cool features, well at least my mom says they are cool! I’ve given the ability to allow a user to put options on the map from single to multiple markers, polyline, panning, depth, latitude, longitude and more. You can see some working examples at my web development portfolio.
I’ll go over some code examples of how this map works and you can see a lot more of the examples at the link to my portfolio I’ve given above.
I think the most common use for this map will be for a user to place the map on their page with a custom latitude and longitude. To do this we would need to instantiate a selector(HTML element) on a page with the Google Maps jQuery function. We can then pass the latitude and lonitude parameters to the plugin and get some pretty Google Maps goodness.
$(document).ready(function() {
$('selector').googleMaps({
latitude: 49.26063518364422,
longitude: -123.15673828125
});
});
The above code example will center the map on Vancouver, BC. Coincidentally my hometown. Seems pretty simple doesn’t it? The plugin does all the Google API code for you.
What if you wanted to have some markers placed on the map? It’s pretty simple we would need to center the map to a latitude and longitude point and then we can assign markers to marker specific latitudes and longitudes. Keep in mind if your latitude and longitude marker point isn’t within the original center point you will not see it unless you move the map around or zoom out.
$(document).ready(function() {
$('selector').googleMaps({
latitude: 49.26063518364422,
longitude: -123.15673828125,
markers: {
latitude: 49.26063518364422,
longitude: -123.15673828125
}
});
});
As you can see we’ve added a latitude and longitude to the markers paramater. The latitude and longitude is exactly the same as the maps latitude and longitude center point. Still pretty simple, no?
What if you wanted to have multiple markers? Well it’s just as simple as adding multiple latitude and longitude points as an array inside the markers parameter.
$(document).ready(function() {
$('selector').googleMaps({
latitude: 49.26063518364422,
longitude: -123.15673828125,
markers: [{
latitude: 49.26063518364422,
longitude: -123.15673828125
},{
latitude: 49.26263518364422,
longitude: -123.15773828125
}]
});
});
With this above example you will now see 2 marker points on the map. Please do keep in mind the height and width of the selector you use to display the map, affects the viewing area of the map.
Those are some basic examples of the power of the Google Maps jQuery Plugin. Head on over to my portfolio projects page to see more in depth examples and to download the jQuery plugin for your development needs.
If you like this article, please use the buttons below to share it or leave me a comment and let me know your thoughts – Shawn
![[Valid RSS]](http://www.unemployeddeveloper.com/wp-content/themes/ud2/images/valid-rss.png "Validate my RSS feed")
[...] This post was mentioned on Twitter by maiis, Unemployed Developer. Unemployed Developer said: Unemployed Developer: Google Maps jQuery Plugin http://www.unemployeddeveloper.com/319_google-maps-jquery-plugin/ [...]
Social comments and analytics for this post…
This post was mentioned on Twitter by unemployeddev: Unemployed Developer: Google Maps jQuery Plugin http://www.unemployeddeveloper.com/319_google-maps-jquery-plugin/…
Just a heads up, testimonials is spelled incorrectly and the link to contact page doesn’t work on mayzes.org from the Google Maps plugin page.
This sounds nice. Haven’t tried yet. But will check out and update here when I get time.
Good Luck!
[...] This post was Twitted by visualpro [...]
Looks good! I’ll definitely be trying it on some upcoming projects.
Question: is there a way to do polygons as well as polylines?
@Bob – Thanks for letting me know. I should have done a better QA process.
@Sumant – Looking Forward to it!
@Jason – I haven’t gotten to the polygon portion of it. I’m looking at that for my next release. My original goal was to keep it basic, but I was having so much fun developing it that I kept adding stuff. I finally stopped myself and drew the line at polygons and some other stuff.
[...] Maps jQuery Plugin – http://www.unemployeddeveloper.com/319_google-maps-jquery-plugin/ [...]
[...] Google Maps jQuery Plugin Review | Unemployed Developer (tags: jquery maps) [...]
Are there methods for geocoding?
@Cody – Not yet, that is one of my planned implementations for version 2.
Nice plugin, thanks for putting this together!
[...] Google Maps is an extremely powerful tool that many websites can use. I’ve come across this jQuery Plugin at Unemployed Developer that makes using Google Maps extremely easy, especially if you like to use [...]
[...] Maps is an extremely powerful tool that many websites can find a use for. I’ve come across this jQuery Plugin at Unemployed Developer that will make using Google Maps extremely easy, especially if you like to [...]
@SHAWN
Could you, please, tell me, when approximatly new version 2 will be ready?
Since I wrote this I have released a 2nd version. (http://www.mayzes.org/googlemaps.jquery.html).
Not sure if you’ve seen that one yet.
Simple and usefull. Thanks
I’m having a little bit of trouble viewing your site in Opera, but it may just be my computer. Apart from that, I love your site. I plan on browsing around and reading some more posts!
You may want to note,
The minimized version of your code provided on the site is borken. I found that most minimizers out there break it. However not all.
Also I am unable to access the zoho discussion board linked on your site for the plugin. It tells me I don’t have permission to access that portal.
I like your style, the fact that your site is a little bit different makes it so interesting, I get fed up of seeing same-old-same-old all of the time. I’ve just stumbled this page for you
how can i use the marker if i dont know the latitude and longitude. the geocode doent work under that.. any help will be greatly apprciated.. i’m a newbie on jquery