Implementing Google Maps with jQuery ~ Web Speaks

Google maps are the most popular service for displaying locations over the web. Today we will learn how to implement Google maps in you web pages. We will create custom markers for pointing the locations on the map. We will also create infoWindows for showing the information text for the locations. See the demo here.

Live demo Download Script

Including Google Maps Javascript

You need to create a Google Maps key for your domain at code.google.com/apis/maps/signup.html. Then include the following JS in your web page:

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true">
</script>

Initializing Google Maps

For initializing Google Maps on your web page, we have created a function called 'initialize()'. Here is the body of the function:

function initialize() {

 //Create a location object with latitude and longitudes
 var delhi = new google.maps.LatLng(28.635308, 77.22496);

 //Create options for the map object
 var myOptions = {
  zoom:10,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: delhi
 }

 //Create our map
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

Creating Custom markers on Google Maps

For creating markers with our own icons, we have created a function called 'createMarker()'. This function accept two parameters:
1. map: map object on which marker is to be placed.
2. centerLoc: the location object where marker is to be located Here is the body of the function:

/*Function for creating the custom marker*/
function createMarker(map, centerLoc){
 var image = new google.maps.MarkerImage(
  'http://www.webspeaks.in/favicon.ico',
  new google.maps.Size(40,35),
  new google.maps.Point(0,0),
  new google.maps.Point(0,35)
 );
 marker = new google.maps.Marker({
  position: centerLoc,
  map: map,
  icon: image,
  title:"Click here for more info."
 });
}

Creating Custom infoWindow on Google Maps

For creating infoWindow on Google Maps, we have created a function called 'createInfoWindow()'. This function accept three parameters:
1. map: map object on which marker is to be placed.
2. marker: The marker object on click of which infoWindow needs to be opened
3. customText: The text to be written in infoWindow Here is the body of the function:

/*Function for creating the custom infoWindow*/
function createInfoWindow(map, marker, customText){
 infowindow = new google.maps.InfoWindow({
  content: customText
 });

 /*Open infoWindow on clicking the marker*/
 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
 });
}

Complete implementation of Google Maps

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=ABQIAAAA637Mus9i198xaCP6kyeT0RQx_VuEwDbQw2tT4lOIPXcH-8yh-RShip_gsIHcjuA8B3qb__racWinFg&sensor=true">
    </script>
 <script type="text/javascript">
  //Variable for holding map object
  var map;

  //Variable for holding marker object
  var marker;

  //Variable for infowindow map object
  var infowindow;
  
  jQuery(document).ready(function(){
   /*Map initialization*/
   function initialize() {

    //Create a location object with latitude and longitudes
    var delhi = new google.maps.LatLng(28.635308, 77.22496);

    //Create options for the map object
    var myOptions = {
     zoom:10,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     center: delhi
    }

    //Create our map
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    createMarker(map, delhi);//Call function for creating our marker
    customText = '<div id="infoWindow">Welcome to <b>New Delhi</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, Wordpress, Facebook API, Twitter API, PHP security tips.</div>';
    createInfoWindow(map, marker, customText);//Call function for creating our infowindow
   }

   /*Function for creating the custom marker*/
   function createMarker(map, centerLoc){
    var image = new google.maps.MarkerImage(
     'http://www.webspeaks.in/favicon.ico',
     new google.maps.Size(40,35),
     new google.maps.Point(0,0),
     new google.maps.Point(0,35)
    );
    marker = new google.maps.Marker({
     position: centerLoc,
     map: map,
     icon: image,
     title:"Click here for more info."
    });
   }
   
   /*Function for creating the custom infoWindow*/
   function createInfoWindow(map, marker, customText){
    infowindow = new google.maps.InfoWindow({
     content: customText
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
   }

   jQuery('#mumbai').click(function(){
    var Mumbai = new google.maps.LatLng(19.0759837, 72.8776559);
    map.setCenter(Mumbai);
    createMarker(map, Mumbai);
    customText = '<div id="infoWindow"><b>Welcome to Mumbai</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, Wordpress, Facebook API, Twitter API, PHP security tips.</div>';
    createInfoWindow(map, marker, customText);
   });

   jQuery('#new-york').click(function(){
    var newyork = new google.maps.LatLng(40.77, 73.90);
    map.setCenter(newyork);
    createMarker(map, newyork);
    customText = '<div id="infoWindow"><b>Welcome to New York</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, Wordpress, Facebook API, Twitter API, PHP security tips.</div>';
    createInfoWindow(map, marker, customText);
   });

   initialize();
  });
 </script>
</head>
<body>
 <div class="googlemap">
  <div id="map_canvas"></div>
  <div class="text">
   <a id="mumbai" href="javascript:;">Go to Mumbai</a><br />
   <a id="new-york" href="javascript:;">Go to New York</a><br />
  </div>
 </div>
</body>
</html>

A bit of CSS

body{
 font-family:Sans-serif;
 font-size:12px;
}
.googlemap{
 margin: auto;
 padding: 0;
 width: 960px;
}
#map_canvas{
 margin: auto;
 width: 650px;
 height: 350px;
 border:2px double #ececec;
 padding:10px;
}
#infoWindow {
 color: #3E56E5;
 height: 100px;
 width: 200px;
 overflow:hidden;
}
div.text{
 margin: auto;
 text-align:center;
}
div.text a{
 color: #888888;
 font-weight: bold;
 text-align: center;
 font-size: 18px;
}