There are lots of powerful jQuery plugins out there. Let’s have a look how jQuery’s Plugin jMaps can help us to integrate a Google Maps goodie in a website. jMaps is originally developed by DigitalSpaghetti and can be downloaded from the plugin section on jQuery.com. So let’s start:
Step 1: Google Maps Key
Get google maps key to access google maps service and add following tag to your website:
Remember that for displaying Google Maps in your local environment it is not necessary to enter a valid key, but once you are ready to go your maps widget will not work without the key. Google uses it to prevent fraud and misuse of the API and assigns it to each person individually.
Step 2: Modify your HMTL
First you need to refer to jQuery library and to downloaded jMaps file. Add following two tags with your individual file- and folder names (and paths) to your HTML file
..and provide a DIV container (feel free to use any other HTML tag) where you want your Google Maps widget to be inserted. For instance:
Step 3: Call the jMap function
Lets have a look what all this Options stand for
With the first line of code you select the HTML tag with id=”googleMap” using jQuery’s CSS Selector ‘ #googleMap’ and fire the jMap function giving it a Object Literal with several attributes. Most of them are self explaining except of those magic numbers for the mapCenter. Those coordinates you can get on the Google Maps page by entering wished address into the maps form. Once Google Maps has displayed the requested section of the map you can get the according coordinates by entering following magic spell into the location bar of your browser:
Google Maps will than alert the needed coordinates. All you need to do here is to replace of the “(” and “)” by “[” and “]”and to assign the value to the mapCenter attribute. The further function ‘addMarker’ will get you a marker on the map.