Please Note: Blog posts are not selected, edited or screened by Seeking Alpha editors.

Adding Markers Using the Google Map API and jQuery Part 1

The Google Map API presents a complicated way for developers and webmasters to add made-to-order interactive charts to their websites. Version 3 of the API, issued in May of 2009, comprises a entire overhaul of the API in answer to some years worth of client repsonse on the previous version.

In this tutorial we’ll cover a couple of of the API’s easier characteristics by
displaying you how to add a chart with a set of position markers to a website.
Each marker will have an affiliated info bubble with the title and address of
the location. What’s more, we’ll be stacking the position facts and numbers by Ajax, so
this can be utilised as the first step in the direction of evolving a more sophisticated
map-based application.

For demonstration, if your site’s communicate sheet displays the place of all
your retail positions on a chart, you could filter them dynamically (say,
founded on which ones suggested certain characteristics or were open on a granted day) by
dispatching those parameters to the server and brandishing markers on the map
founded on the returned XML.

Before we start, you should have not less than a rudimentary comprehending of
jQuery. To discover more about any of the categories and procedures we’ll be using,
you can confer the Google
Maps API reference.

In this tutorial we’re going to create:

         an HTML document called markers.html, which will
be utilised to brandish the chart and markers

         an XML document called markers.xml, which
comprises facts and numbers surrounded in
name,
address, lat, and lng tags

         a JavaScript document called markers.js, where
we’ll put the cipher to burden in the facts and numbers and conceive the map

Data Format

Before we start composing cipher, it’s best to analyze the format of the
XML facts and numbers we’ll be utilising to burden our position data.

The coordinates and data for each marker we desire to location on
our chart will be comprised in an XML file. This makes it so straightforward to change it,
or have it developed mechanically by a server-side script dragging the
data from a database. The XML is formatted as follows:

<?xml version="1.0"?><markers>  <marker>    <name>VODAFONE</name>    <address>near Ghumaghumalu Restaurant, Marripalem, Visakhapatnam</address>    <lat>17.74033553</lat>    <lng>83.25067267</lng>  </marker>  <marker>  <name>VODAFONE</name>    <address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>    <lat>17.73254774</lat>    <lng>83.29195094</lng>  </marker>  </markers>

The origin component is markers, and
it comprises a sequence of
marker
components, each encompassing a text address, latitude, and longitude.

Before we can burden this XML and use it to location markers on our map,
we first require to encompass the Google Map JavaScript and the jQuery library
in our HTML page.

jQuery and the Maps API

The two libraries we’ll be relying on for our functionality are,
unsurprisingly, jQuery and the Google Map API library itself. As far as
jQuery is worried, you can easily download the newest type from the
jQuery dwelling sheet and encompass it in your HTML sheet as follows:

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

For the Google Map cipher, we can connection exactly to the Google
servers:

<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false&quot;></script>The sensor=false argument identifies that we
don’t desire to use a sensor (like a GPS locator) to work out the user’s
location.
Google Map
Windows XP boot disk