How to integrate Google Maps in a website using jQuery in 3 steps
2 Februar, 2011 Hinterlasse einen Kommentar
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:
<script src=”http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_HERE” type=”text/javascript”></script>
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
<script type=”text/javascript” src=”scripts/jquery-1.4.4.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery.jmap.js”></script>
..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:
<div id=”googleMap”></div>
Step 3: Call the jMap function
Now all you need to do is to call the jMap function and feed it with map data you want to be displayed. There are several way to do it. You can either insert an internal script snippet into your HTML file, or you can create a new external JavaScript document and call the jMap function using the $(document).ready(function() {}). I prefer to link to external JavaScript files just before the closing </body> tag at the end of the DOM. Doing this you can skip the $(document).ready - stuff, since this is only telling the browser: “Wait till you have the complete DOM”. Since the script link appears on the end of the DOM the DOM is already ready and you can give your fingers a break. So lets fire the jMap:
$(‘#googleMap’).jmap(‘init’, {
mapCenter:[48.173224, 11.530809],
mapShowjMapIcon: false,
mapZoom: 12,
mapControlSize: ‘large’,
mapEnableDoubleClickZoom: true
});
$(‘#googleMap’).jmap(‘addMarker’, {
pointLatLng:[48.173224, 11.530809]
});
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:
javascript:void(prompt(”,gApplication.getMap().getCenter()));
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.
You can see how this looks like with this DEMO: http://www.comsysto.com/Imprint.htm
DamirAbdic
