Tutorial on jQuery and Google Maps
Google Maps, a powerful mapping service by Google that allows users to search satellite and street maps for specific locations. The service also includes add-ons for street-view photography, links to information and user-generated content about a location, an easily-learned interface to move around the map and detailed directions from one point to another. Best of users can integrate the service into their own Web pages or Internet projects, taking advantage of all the native functionality of Google Maps while adding their own plug-ins to tailor a map to their specific needs with appropriate programming languages like JQuery.
Other People Are Reading
-
JQuery
-
JQuery is a Javascript library, meaning that the code operates in the JavaScript framework, but is composed by a select group of commands and functions drawn from the larger code. In other words, JQuery is a subset of JavaScript. The JQuery library, however, was designed to simplify JavaScript and create a set of commands that are easy for users to implement and focus on the strongest and most widely-used features of JavaScript. Specifically, JQuery is used for document traversing, animation, Ajax Interactions and -- most relevant for Google Maps integrations -- event handling.
JQuery Applications in Google Maps
-
Event handling, a powerful JQuery feature, basically tells the system what to do when a specific event has occurred. A user placing his mouse over an image or clicking on a link, for instance, are common web design events to which JQuery can assign a consequence like changing an image or centering an image over the click location every time the event occurs. In a Google Maps integration, JQuery event handling can be used to display custom texts for different map locations, activate different layers or informational points on a map or change the information displayed on a map, depending on the information a user provides. JQuery's Asynchronous JavaScript and XML, or AJAX, integration manages the incorporation of JavaScript and simple mark-up languages like HTML. It can also be used to simplify the incorporation of a Google Map into a specific area of a website or incorporate data from other applications with geographic references, such as mobile social media applications that record a user's location.
-
Integrate Google Maps and JQuery
-
Google Maps makes its Application Programming Interface, or API, available free of charge to users as long as they credit the source. Users simply request an API key from Google that enables them to access the full program on Google's servers and integrate the application into their own projects. Google's servers also include a full AJAX library that a programmer can use to run JQuery commands and easily integrate them into the Maps API. As a result, users with an API key only have to download the API, load a Google Map onto their own projects and add their own JQuery commands into their code to add features like customized texts, integration with other applications and new layers to the map.
Processing Time: What to Incorporate
-
As a simplified library of JavaScript, JQuery allows for relatively light and agile coding. The integration of added features in a new scripting language, however, no matter how light-weight that language may be, always adds some processing time to user requests. Using the JQuery library directly from the same Google server where the API is stored can reduce these delays slightly, but users will still notice some delays when comparing Google Maps with JQuery plugins to the standard version of Google Maps. As a result, programmers designing JQuery add-ons to Google Maps, and need a simple command solution, should be careful to only use JQuery when the feature is not included in the functions native to Google Maps.
-
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
