Adding Markers Using The Google Map Api And Jquery Part 2

Now that we have our rudimentary libraries, we can start construction our
functionality.
Outlining the Script
Lets start with the skeleton of our chart code:
var MYMAP = {
bounds: null,
map: null
}
MYMAP.init = function(latLng, selector) {

}
MYMAP.placeMarkers = function(filename) {

}
Were wrapping all our chart functionality interior a JavaScript object
called MYMAP, which will assist to bypass potential
confrontations with other scripts on the page. The object comprises two
variables and two functions. The map variable will
shop a quotation to the Google Map object well conceive, and the
bounds variable will shop a bounding carton that contains
all our markers. This will be helpful after weve supplemented all the markers,
when we desire to zoom the chart in such a way that theyre all evident at the
identical time.
Now for the methods: init will find an component on
the sheet and initialize it as a new Google chart with a granted center and
zoom level. placeMarkers, meantime, takes the
title of an XML document and will burden in coordinate facts and numbers from that document to
location a sequence of markers on the map.
Loading the Map
Now that we have the rudimentary structure in location, lets compose our
init function:
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
We conceive an object literal to comprise a set of choices, utilising the
parameters passed in to the method. Then we initialize two things defined
in the Google Map APIa Map and a
LatLngBoundsand accredit them to the properties of
our MYMAP object that we set up previous for this
purpose.
The Map constructor is passed a DOM element
to use as the chart on the sheet, as well as a set of options. The options
weve arranged currently, but to get the DOM component we require to take
the selector string passed in, and use the jQuery
$ function to find the piece on the page. Because
$ comes back a jQuery object other than a raw DOM
node, we require to drill down utilising [0]: this permits us
to get access to the naked DOM node.
So one time this function has run, well have our chart brandished on the
sheet, and have an empty bounding carton, prepared to be amplified as we add our
markers.
Adding the Markers
Speaking of which, lets have a gaze at the
placeMarkers function:
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var title = $(this).find('name').text();
var address = $(this).find('address').text();
// conceive a new LatLng issue for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var issue = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
// continue the bounds to encompass the new point
MYMAP.bounds.extend(point);
// add the marker itself
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
// conceive the tooltip and its text
var infoWindow = new google.maps.InfoWindow();
var html=''+name+'
'+address;
// add a listener to open the tooltip when a client bangs on one of the markers
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
});
// Fit the chart round the markers we added:
MYMAP.map.fitBounds(MYMAP.bounds);
});
}