Java Interview Questions: How to use Google map api tutorials with examples

Google map api tutorials with examples:

Google map API is used for several applications like marking a place on google map , making a path between two places,finding the directions between two plces and many. Here i am explaining two examples.

To work with Google map API we need to have the API key. We can get this key by registering the following website.

Step 1: Register in the below website to get the API key.

https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Note: If you go through the above website, it will give several instructions for getting API key. Follow those instructions.

Step 2: Copy the below code into a notepad and save with Any_Name.html. But use your Google map API Key in place of "USE_YOUR_KEY".

Example Code1 to Make a Mark on a Particular Place:



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#display_here { height: 100% }

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

<script type="text/javascript">
      var map;
function initialize() {

    var latlng = new google.maps.LatLng(17.3667, 78.4667);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    map = new google.maps.Map(document.getElementById("display_here"), myOptions);

    var marker = new google.maps.Marker
    (
        {
            position: new google.maps.LatLng(17.3667, 78.4667),
            map: map,
            title: 'Click me'
        }
    );
    var infowindow = new google.maps.InfoWindow({
        content: 'Location info:<br/>Country Name:<br/>LatLng:'
    });
    google.maps.event.addListener(marker, 'click', function () {
        // Calling the open method of the infoWindow
        infowindow.open(map, marker);
    });
}
</script>
</head>

<body onload="initialize()">
<div id="display_here" style="width:100%; height:100%"></div>
</body>

</html>

Output: If you run that html, you will see the following output. (You should have good internet connection)

Explanation:

In the above example, google.maps.LatLng(latitude,longitude) will take latitude and longitude of a place as parameters. Zoom property can be used to increase or decrease the size of the google map image. The google.maps.Map() method will take two parameters HTML ID and Options. Here HTML ID tells where to display google map image. The google.maps.Marker() can be used to mark a place on the google map. Here we can set the position of the marker and title. The google.maps.event.addListener() method can be used to add events to a marker.

Example Code2 to Make a Path Between Two Places:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#display_here { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=USE_YOUR_KEY&sensor=false"></script>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var hyderabad = new google.maps.LatLng(17.3667, 78.4667);
    var mapOptions = {
      zoom:14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: hyderabad
    }
    map = new google.maps.Map(document.getElementById("display_here"), mapOptions);
    directionsDisplay.setMap(map);
}
function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}
</script>

</head>

<body onload="initialize()">
<div>
<b>Origin: </b>
<select id="start" onchange="calcRoute();">
<option value="hyderabad, in">hyderabad</option>
<option value="pune, in">pune</option>
<option value="chennai, in">chennai</option>
<option value="delhi,in">delhi</option>
<option value="goa">goa</option></select>

<b>Destination: </b>
<select id="end" onchange="calcRoute();">
<option value="bangalore, in">bangalore</option>
<option value="mumbai, in">mumbai</option>
<option value="calcutta, in">calcutta</option>
    <option value="vizag">vizag</option>
</select>
</div>
<div id="display_here" style="top:30px;"></div>
</body>
</html>
Output: If you run that html, you will see the following output. (You should have good internet connection)

Explanation:

In the above example we need minimum two places to draw a path between them. Here google.maps.DirectionsService().route() will take care of creating path between two places.

Note: use your Google map API Key in place of "USE_YOUR_KEY".

Thursday, July 19, 2012

How to use Google map api tutorials with examples