Google Maps Tutorials (v3): Basic Concepts

   In this tutorial we will teach you how to how to add local language
support to Google Maps .By Local language support what we mean 
is  you can actually display your Google Maps in Local Language like
Arabic,Urdu,Japanese,Hindi and all the languages that are supported
by Google .

   How to do ?
   To change the Google Maps basic language you have to just change 
one parameter  language which is by default set to en(english).

<script src=";language=ja" type="text/javascript">

The languages supported by Google Maps

Language Code :


What Next??

Checkout all the cool stuff under Google Maps category and
don't forget to share and bookmark this article for further
reference .
Google Map v3 Tutorial : Basic Concepts 

  There are two ways by which you can change the default Google
Map Marker . In place of the default pushpin icon you can replace
it with the icon of your own . Google Maps documentation says 
the icons can be of two types .

 1) Simple Icons
This can be done by specifying the markers icon property 
The icon property is set this way .

    icon : 'somemarker.png'

For transparency ,icon should be an 24-bit png image .

    function initialize() {

    // Setting the Options for the Maps 
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      mapTypeId: google.maps.MapTypeId.ROADMAP

    //Creating the Map Object 

    var map = new google.maps.Map(document.getElementById("map_canvas"),

    var image = 'somemarker.png';
    // Image for the Icon  
    var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);

    var someMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
//End the Initialize function 

I assume you know how to call the initialize function .You can
get the basic format of the code here .

2) Complex Icons

This is the second set of markers  , but unlike simple icons
here you can specify the exact clickcable region , the shadow
image , the order in which they should be displayed with
respective to other overlays . Here you have to specify the
size of the icon ,anchor of the icon .Its more customizable
and you can customize it according to your needs .

So along with the icon property you will have to specify three
more properties .
 a) shadow
 b) shape
 c) zIndex

Shadow and Icon in case of Complex Icons must be objects of

MarkerImage takes in four parameters
 a) Image Source
 b) Size of the Marker
 c) Origin  of Marker
 d) Destination of Marker

Example of MarkerImage:
var image = new google.maps.MarkerImage('beachflag.png',
      // This marker is 30 pixels wide by 32 pixels tall.
      new google.maps.Size(30, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));

  In the Similar Manner you can create the shadow MarkerImage .
Things you must note while choosing the shadow image is :

 a) The shadow must spread out horizontally in 45 degree to the
 icon image . Both Shadow and the Icon images should be transparent
i.e must be of the extension (.png) .

The third property Shape of the Marker takes in two parameters
    a) type      :   HTML <area> elements examples (poly,rect,circle).
    b) coord   :   X,Y coordinates of the polygon selected .
The shape is used to define the clickable area of the marker .

Code for Complex Icons
 function initialize() {

    // Setting the Options for the Maps 
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      mapTypeId: google.maps.MapTypeId.ROADMAP

    //Creating the Map Object 

    var map = new google.maps.Map(document.getElementById("map_canvas"),
      var image = new google.maps.MarkerImage('beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));

      var shadow = new google.maps.MarkerImage('beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML  element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
      var shape = {

           coord: [1, 1, 1, 20, 18, 20, 18 , 1],
           type: 'poly'


     var someMarker = new google.maps.Marker({
        position: myLatLng,
        map    : map,
        shadow : shadow,
        icon   : image,
        shape  : shape,
        zIndex : 2   

//End the Initialize function 

beachflag_shadow.png (Shadow)

   beachflag.png (Icon Image)

      Google Latitude came up with their location-detection utility in 2010 . Since
then  it has been one of the most searched terms on the internet. A number of
Google Latitude Apps have sprung up in the Android Market and we are here
reviewing the top 3 Latitude Apps in the Android market.

       One thing that distinguishes Google Latitude Apps from other Location detection GPS based apps is accuracy and the use of Wi-fi , Cell tower detetction and A-Gps(Smartphones inbuilt gps also called Assisted Gps.) simultaneously giving an accuracy of around 50-100 metres .


      Latify is the best Google Latitude App seen so far , it has a variety of
features which makes it stand out from the crowd . This app allows you to
share your location with your friends through Twiiter ,Facebook, Buzz, Email.
It also supports offline sync, background gps updates .

      Another useful feature is that it allows you to update the Location at an user
defined  interval when you are stationary and this saves the battery .
  History Visualization :    
      Best feature in this app is the history visualization,cool display of your
history on Google Maps integrated with playback and progress bar of
your history and giving you the feel you are watching an movie .
       Export your history in KML format which you can easily display on Google
 Maps . We had written a post showing you How to Integrate KML files with 
Google Maps? . Another feature is integration with Google Fusion Tables and
also with a click you can share this KML files with your friends through Email,
Dropbox, Twitter and thats really cool and really worthy of buying .

  Latify Features Video :                                   Download     


2.Latitude Update

     One of the first Latitude Apps to hit the Android market . This Latitude App
allows you to choose the frequency at which the Google Latitude updates your
current location . So even if you haven't  used Google Maps for a long time , the
location that is displayed is updated in background .  You can also retrieve your
location history , for more details you can visit the site .

Screenshot                                              Download 

3.Succotash-Location Prediction

     This a cool fun app based on Google Latitude which actually predicts your
future location based on your history of stored latitude location . Prediction is
good enough especially if you have been using Google Latitude for pretty long.
Display and user interface is also good and is really fun to use .

Screenshot                                                 Download

What next??

     If you liked this article then you can show your appreciation by sharing
this articles . Also don't  forget to check out all the cool Latitude Articles
on this site through which you  can get new ideas .

I spend a few days searching on the web to get a good geocode database
and all my efforts proved to be in vain because there were a number of sites
that was providing me with a geocoding address database at an expensive cost
of $30-$100 . The cost was huge for me as this was only a supplement to my
full project . Luckily for me and for you while researching on this topics I came
across a number of viable options that could fit my need with a little bit of hack.
This were the three mapping giants Google Maps , Yahoo Maps & Bing Maps,
each of had their geocoding services that could be accessed via an API and this
exactly fitted my needs since I could store this data onto  my  database although
it is again the policies , you can still use it without a problem for small and big
projects within each of the MAP API's query limit .

Research on the Google,Yahoo and Bing Maps

So I started my testing the various Geocoding values returned by the various
API. I started out with Google Maps . Well the results of geocoding of the Google
Maps was highly accurate both for locations in and outside the US. The
Google Maps scaled well in terms of both accuracy as well as granularity of
results, in short it was giving out accurate geocoding results for even small towns .
The next test was on Bing Maps but sorry to say Bing Maps accuracy was best
till the  city level ,   most of the Geocoding Address results was restricted to
only  City Level  results .The next and final research was done on Yahoo Maps
and  happy to say Yahoo Maps Address Geocoding results was too accurate and
results between Yahoo and Google Maps could actually be mapped with each
other .

Difference between Google Maps and Yahoo Maps ?

Each one has its own pros and cons and telling which ome is better is tough job .
However the key differences I have found out while comparing the two API's
  1. Graphically Google Maps has superior looks and gives a good
    experience to the end user than the Yahoo Maps .
  2. Loading time of Yahoo Maps is less than that of Google Maps.
  3. Geocoding Rate of Google Maps is about 2000 queries a day/server .
  4. Geocoding Rate of Yahoo Maps is around 50,000 queries a day .
  5. In Google Maps you can take the benefits of the Google Driving Directions
    API but Yahoo doesn't provide such a facility to use its Driving Directions
    in an API even though it does have one integrated in its Yahoo Maps website.

Creating the Geocode Address Database

With Yahoo providing me an Geocoding Address limit of 50,000 queries and its
Geocoding addressing being accurate enough , I decided to use the Yahoo Maps API.
So lets start the coding part .The code for Yahoo Geocoding is as follows



// Json encode the data

function json_code ($json) 
$json = substr($json, strpos($json,'{')+1, strlen($json));
$json = substr($json, 0, strrpos($json,'}'));
$json=preg_replace('/(^|,)([\\s\\t]*)([^:]*) (([\\s\\t]*)):(([\\s\\t]*))/s','$1"$3"$4:',trim($json));
return json_decode('{'.$json.'}', true);
// function to get the geocode of the address

function geoCodeYp($point)
// Replace your Yahoo AppID here 
$yahoo_appid = 'Your yahoo app id';            

//URLEncode for eg convert space to %20 .
$pointenc = urlencode($point);

// URL Formation that will fetch you the results on query

// get the contents of the URL formed
$jsondata = file_get_contents($url);

$json_data= '{
  a: 1,
  b: 245,
  c with whitespaces: "test me",
  d: "function () { echo \"test\" }",
  e: 5.66

 $coord=explode(" ",$point);
        // this will json encode the data .
  // line1 of addrress comprising of house,street no etc
        // line 2 of address comprising of city state country  
  $line1 =$convertedtoarray['ResultSet']['Results']['0']['line1'] ;
        $line2 =$convertedtoarray['ResultSet']['Results']['0']['line1'] ;
        $county =$convertedtoarray['ResultSet']['Results']['0']['county'] ;
        $street =$convertedtoarray['ResultSet']['Results']['0']['street'] ;

      $countrycode=$convertedtoarray['ResultSet']['Results']['0']['countrycode'] ;
      $statecode=$convertedtoarray['ResultSet']['Results']['0']['statecode']   ;
      $city=$convertedtoarray['ResultSet']['Results']['0']['city'] ; 
      $house=$convertedtoarray['ResultSet']['Results']['0']['house'] ;
      $latitude=$convertedtoarray['ResultSet']['Results']['0']['latitude'] ;
      $longitude=$convertedtoarray['ResultSet']['Results']['0']['longitude'] ;     
$yahooresults = array('countrycode'=>$countrycode,'statecode'=>$statecode,'county'=>$county,'city'=>$city,'street'=>$street,'house'=>$house,'latitude'=>$latitude,'longitude'=>$longitude);    
 return $yahooresults ;


To increase modularity & code reusability I would advice you to keep this page
separate . So How do I use this php code?

Create another php page in which you will be using this geocoding functions
using the php include page command .

1)Suppose you want to get the geocode address of a place say "CHICAGO" .
You can simply call the function as follows

geoCodeYp("CHICAGO") ;

Now for storing this result into the database you will have to capture the
result like this
$result=geoCodeYp("Chicago") ;
// get each of the values as
// Get the Latitude
// Get the Longitude

.............Remaining Variables..................
You can store each of the results in database by retrieving
the remaining values as $result['valuename']; . The valuenames
are city,countrycode,state,street,house etc.

2) To geocode address of a point(latitude&longitude)
//Example Point with latitude 72.5632 & longitude 19.756
// You have to include space between the latitude & longitude
$point=$latitude." ".$longitude ;
//call the geocode function

Time Required to setup Geocode Address Database

Suppose you have to want to geocode the address of around 5,00,000 address
1 yahoo appid -> 10 days 
2 yahoo appid -> 5 days
10 yahoo appid -> 1 day
And best thing is that you can do this from a single server or from your pc
with php installed .Tell me if you have problems implementing it . I haven't
included the steps to insert the values into database & retrieve from it ,
well that is what Google is for!!!

   Do Check out all the Google Maps category on this website!!

In this tutorials on Google Maps we will show to you how
you can Cutomize the Google Maps to make it blend with
your websites templates .  So for this the three things we
are going to deal with is

a) mapTypeIds
    This is used to specify the differenet map Types we
    want in our map .If we donot set this explicitly it will
    render all three type(RoadMap ,Satellite ,Hybrid)
    by default. In this tutorial we will be creating and
    using our Customized Map named "RailwayIndia".

   This will be used to define where and how we will
   be applying our styles on Google Maps . It has 3
    1) featureType : It defines on which map element
    we will be applying your styles .It was a number
    of values which we will learn shortly like transit,
    administrative etc .Here's the full list

administrativeApply the rule to administrative areas.
administrative.countryApply the rule to countries.
administrative.land_parcelApply the rule to land parcels.
administrative.localityApply the rule to localities.
administrative.neighborhoodApply the rule to neighborhoods.
administrative.provinceApply the rule to provinces.
allApply the rule to all selector types.
landscapeApply the rule to landscapes.
landscape.man_madeApply the rule to man made structures.
landscape.naturalApply the rule to natural features.
poiApply the rule to points of interest.
poi.attractionApply the rule to attractions for tourists.
poi.businessApply the rule to businesses.
poi.governmentApply the rule to government buildings.
poi.medicalApply the rule to emergency services
 (hospitals, pharmacies, police, doctors, etc).
poi.parkApply the rule to parks.
poi.place_of_worshipApply the rule to places of worship, such as
church, temple, or mosque.
poi.schoolApply the rule to schools.
poi.sports_complexApply the rule to sports complexes.
roadApply the rule to all roads.
road.arterialApply the rule to arterial roads.
road.highwayApply the rule to highways.
road.localApply the rule to local roads.
transitApply the rule to all transit stations and lines.
transit.lineApply the rule to transit lines.
transit.stationApply the rule to all transit stations.
transit.station.airportApply the rule to airports.
transit.station.busApply the rule to bus stops.
transit.station.railApply the rule to rail stations.
waterApply the rule to bodies of water.

   2)ElementType : It basically takes two values
    a)geometry  :- whether you want to apply the
       style to the geometry of the map element .
       For eg if you have selected road as a feature
       type you can apply specific styles and colors
       to the road shapes .
    b) label :- Applying style to the  labels .With
        reference to the above example , customizing the
        style of Road Names .
    c) all : style will be applied to both
   3)  stylers :
        This will define the style of the featureType
        you have selected  . Below I have listed the

gammanumberGamma. Modifies the gamma by raising the lightness to the 
given power. Valid values: 
Floating point numbers, [0.01, 10], with 1.0 representing no
huestringSets the hue of the feature to match the hue of the color supplied
. Note that the saturation and lightness of the feature is conserved,
 which means that the feature will not match the color supplied
 exactly. Valid values: An RGB hex string, i.e. '#ff0000'.
invert_lightnessbooleanInverts lightness. A value of true will invert the lightness of the
 feature while preserving the hue and saturation.
lightnessnumberLightness. Shifts lightness of colors by a percentage of the
 original value if decreasing and a percentage of the remaining
 value if increasing. Valid values: [-100, 100].
saturationnumberSaturation. Shifts the saturation of colors by a percentage of 
the original value if decreasing and a percentage of the remaining
 value if increasing. Valid values: [-100, 100].
visibilitystringVisibility: Valid values: 'on', 'off' or 'simplifed'.

So lets start with the coding :

First of all we will decide what we want to customize and how ?
In this tutorial we will be creating a customized Indian Railways
Maps . So we have selected featureType as transit.railway for
this and we have decided to use invert_lightness feature for
landscape so that it gives  better view of the Railways .

 var stylez = [
      featureType: "transit.station.rail",
      elementType: "geometry",
      stylers: [
        { hue: "#00ff00" },
        { saturation:100 }
      featureType: "transit.station.rail",
      elementType: "labels",
      stylers: [
        { hue: "#ffff00" },
        { saturation:50 }
      featureType: "landscape",
      elementType: "geometry",
      stylers: [
        { invert_lightness:true}

The next step is to create a mapType "RailwayIndia" which
is the name for our customized Google Map .
  var styledMapOptions = {
      name: "RailwayIndia"

  var jayzMapType = new google.maps.StyledMapType(
      stylez, styledMapOptions);

  map.mapTypes.set('bestfromgoogle', jayzMapType);

So this will give the map a name "RailwayIndia" which will
come in the top of the Google Maps . The complete code is
as follows :
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title>
<script type="text/javascript" src=""></script>
var map;
var brooklyn = new google.maps.LatLng( 19.9455,72.8933);

function initialize() {

  var stylez = [
      featureType: "transit.station.rail",
      elementType: "geometry",
      stylers: [
        { hue: "#00ff00" },
        { saturation:100 }
      featureType: "transit.station.rail",
      elementType: "labels",
      stylers: [
        { hue: "#ffff00" },
        { saturation:50 }
      featureType: "landscape",
      elementType: "geometry",
      stylers: [
        { invert_lightness:true}

  var mapOptions = {
    center: brooklyn,
    mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'bestfromgoogle']
  map = new google.maps.Map(document.getElementById("map_canvas"),

  var styledMapOptions = {
      name: "RailwayIndia"

  var jayzMapType = new google.maps.StyledMapType(
      stylez, styledMapOptions);

  map.mapTypes.set('bestfromgoogle', jayzMapType);
<body onload="initialize()">
 <div id="map_canvas" style="width: 400px; height: 400px;">map div</div>

The customized Google Map should look like this now .
If you have found this article helpful or have any queries
you can do so by leaving a comment on this article .
Happy Coding!!!!
Customize your Google Maps to add Pizza , Parks , Places of interest,
Hotels and all what you think is important from your websites commercial
point of view . In this thread we are going to show you how you can
add customized Local Search to your website .

Requirements For Google Maps Local Search

Even though Google Maps V3 API doesn't require a Google
Map Api Key , but to use Google Local Search you need to
get a API Key .

Integrate Google Local Search to Google Maps

1) Initialize the local searcher and set the Call back
     function when the search is completed .  
 gLocalSearch = new GlocalSearch();
 gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);

2)Define the input parameters from where you will take the
search parameters . Once we have the search parameters we
define the Search Center Point and execute the search.
    function doSearch() {
      var query = document.getElementById("queryInput").value;

3) After the Local Search function returns a result we have
to display markers representing the search results . The
markers will have a infowindow displaying the address and
other contact details of the place .

The full code of the Google Maps Local Search goes as follows
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google AJAX Local Search API + Maps API v3 demo</title> 
    <link href="" rel="stylesheet" type="text/css"/> 
    <link href="./places.css" rel="stylesheet" type="text/css"/> 
    <script src=""></script> 
    <script src="" type="text/javascript"></script> 
    <script type="text/javascript"> 
    // Our global state
    var gLocalSearch;
    var gMap;
    var gInfoWindow;
    var gSelectedResults = [];
    var gCurrentResults = [];
    var gSearchForm;
    // Create our "tiny" marker icon
    var gYellowIcon = new google.maps.MarkerImage(
      new google.maps.Size(12, 20),
      new google.maps.Point(0, 0),
      new google.maps.Point(6, 20));
    var gRedIcon = new google.maps.MarkerImage(
      new google.maps.Size(12, 20),
      new google.maps.Point(0, 0),
      new google.maps.Point(6, 20));
    var gSmallShadow = new google.maps.MarkerImage(
      new google.maps.Size(22, 20),
      new google.maps.Point(0, 0),
      new google.maps.Point(6, 20));
     // Set up the map and the local searcher.
    function OnLoad() {
      // Initialize the map with default UI.
      gMap = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: 'roadmap'
      // Create one InfoWindow to open when a marker is clicked.
      gInfoWindow = new google.maps.InfoWindow;
      google.maps.event.addListener(gInfoWindow, 'closeclick', function() {
      // Initialize the local searcher
      gLocalSearch = new GlocalSearch();
      gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
    function unselectMarkers() {
      for (var i = 0; i < gCurrentResults.length; i++) {
    function doSearch() {
      var query = document.getElementById("queryInput").value;
    // Called when Local Search results are returned, we clear the old
    // results and load the new ones.
    function OnLocalSearch() {
      if (!gLocalSearch.results) return;
      var searchWell = document.getElementById("searchwell");
      // Clear the map and the old search well
      searchWell.innerHTML = "";
      for (var i = 0; i < gCurrentResults.length; i++) {
      // Close the infowindow
      gCurrentResults = [];
      for (var i = 0; i < gLocalSearch.results.length; i++) {
        gCurrentResults.push(new LocalResult(gLocalSearch.results[i]));
      var attribution = gLocalSearch.getAttribution();
      if (attribution) {
      // Move the map to the first result
      var first = gLocalSearch.results[0];
      gMap.setCenter(new google.maps.LatLng(parseFloat(,
    // Cancel the form submission, executing an AJAX Search API search.
    function CaptureForm(searchForm) {
      return false;
    // A class representing a single Local Search result returned by the
    // Google AJAX Search API.
    function LocalResult(result) {
      var me = this;
      me.result_ = result;
      me.resultNode_ = me.node();
      me.marker_ = me.marker();
      google.maps.event.addDomListener(me.resultNode_, 'mouseover', function() {
        // Highlight the marker and result icon when the result is
        // mouseovered.  Do not remove any other highlighting at this time.
      google.maps.event.addDomListener(me.resultNode_, 'mouseout', function() {
        // Remove highlighting unless this marker is selected (the info
        // window is open).
        if (!me.selected_) me.highlight(false);
      google.maps.event.addDomListener(me.resultNode_, 'click', function() {;
    LocalResult.prototype.node = function() {
      if (this.resultNode_) return this.resultNode_;
      return this.html();
    // Returns the GMap marker for this result, creating it with the given
    // icon if it has not already been created.
    LocalResult.prototype.marker = function() {
      var me = this;
      if (me.marker_) return me.marker_;
      var marker = me.marker_ = new google.maps.Marker({
        position: new google.maps.LatLng(parseFloat(,
        icon: gYellowIcon, shadow: gSmallShadow, map: gMap});
      google.maps.event.addListener(marker, "click", function() {;
      return marker;
    // Unselect any selected markers and then highlight this result and
    // display the info window on it. = function() {
      this.selected_ = true;
      gInfoWindow.setContent(this.html(true));, this.marker());
    LocalResult.prototype.isSelected = function() {
      return this.selected_;
    // Remove any highlighting on this result.
    LocalResult.prototype.unselect = function() {
      this.selected_ = false;
    // Returns the HTML we display for a result before it has been "saved"
    LocalResult.prototype.html = function() {
      var me = this;
      var container = document.createElement("div");
      container.className = "unselected";
      return container;
    LocalResult.prototype.highlight = function(highlight) {
      this.marker().setOptions({icon: highlight ? gRedIcon : gYellowIcon});
      this.node().className = "unselected" + (highlight ? " red" : "");
  <body style="font-family: Arial, sans-serif; font-size: small;"> 
    <p>Perform a local search on the map below:</p> 
    <div style="width: 500px;"> 
      <div style="margin-bottom: 5px;"> 
          <input type="text" id="queryInput" value="pizza" style="width: 250px;"/> 
          <input type="button" value="Find" onclick="doSearch()"/> 
      <div style="position: absolute; left: 540px;"> 
        <div id="searchwell"></div> 
      <div id="map" style="height: 350px; border: 1px solid #979797;"></div> 
Your Google Map should look like this now !!

You can also mashup the Local Search with your Websites Google Maps theme
like store locator ,taxi services and could be of a great use in tourist website where
you can give your customized views and ratings on Google Local Search Results.