Google map

Because of the internet, you are never too far away from a map now. And smart apps offer almost everything you need: from showing directions on map and getting real time traffic details to finding friends nearby or being reminded of tasks based on your location.

GOOGLE Maps is, by and large, the world’s default online map service. Sure , there are other alternatives like HERE Maps, Bling and even wikimapia, but when you want to quickly find any address on the planet, it is usually best to turn to Google Maps. And that is usually just one aspect of the service Not many people are aware of the things it lets you do – like creating a map of directions for someone else, or getting real time traffic updates – or the tools it offers users to supercharge their experience in browsing Maps on the web.

Get Directions:
The large “get Directions’ button is as simple as it gets. Fill the starting point in A and destination in B, and  google map will immediately give you a detailed directions by road or by foot. If you don’t like the route chosen, you can even click and drag the blue outline marker to modify the path. Also, in case you have to make multiple stops, Google Maps has covered with ‘Add destination’ option.

 

Give Directions:
The next time you invite someone over to your home or an event, jazz up that invitation with custom settings that brings them right to the doorstep.
To do this, click on the ‘My Places’ button, select the ‘Maps’ option and then ‘Create Map’.

Give your map a title, write a short description and choose whether you want it to be visible to anyone in the world or only to those with whom you share the URL.

The mapping tools – shown in the top left corner of the map are easy to understand and use. There’s a place – marker with which you can label your home, along with giving it a description. Next to placemarker are the three types of lines you can draw: point-to-point, lines along roads or shapes

Once you’ve traced your route on the map, you can share it with friends, and even add collaborators to it, so that others can add to or edit the map if needed. This feature is really handy if you are going on a road trip with a group, so that everyone is kept updated and can even suggest a different route.

 

‘My Places’
This is the tab of Google maps that holds everything that pertains to you. Any map you create, any place you rate or star, and any directions you sought will all show up here.

 

‘Views’
In the top right corner, you will find the option to toggle between a Map view and Satellite view. Under this toggle switch are more options such as Terrain and Weather. Other features include:

Traffic: Google offers real traffic updates for India, so you can decide which route to take. And it even estimates traffic conditions on a road during a particular day and time. The feature currently works for Delhi, Mumbai, Bangalore, Chennai, and Pune.

Photos: When someone clicks a photo and tags it on Google Maps, it can be browsed by anyone. In fact, there are so many photos of popular tourist destinations like the Taj Mahal in Agra that you can pretty much take a 360 – degree tour of it.

Webcam: Some people have set up public Webcams on Google Maps that clicks a photo of a place every 15 minutes, and upload it on the map. While this feature doesn’t have much practical functionality at the moment, it’s still cool to browse and see what’s happening in another part of the world right now.

 

Google Map Maker:
Google Map Maker (www.google.com/mapmaker) lets you customize maps quickly and easily. You can add a place, edit it, add a new road, review edits by other users. The interface is intuitive and simple, and in fact, when you start Map Maker, it offers a quick tutorial to explain the basics.

Tips to keep in mind when plotting a map

  • Your house or building may not be on Google maps, but look for shops nearby to serve as convenient placemarkers . ‘Star’ these business outlets and they’ll be saved in the ‘My Place’ tab, letting you accesses them quickly when needed.
  • Finding the latitude and longitude of a point, or marking it as one, is made easier with the LatLng Tooltip and LatLng Market extensions in Map Labs.
  • The ‘hand ‘ icon is used to navigate the map itself, but it’s pain to keep clicking it when you want to just drag your way across the map. Instead use this keyboard shortcut: hold down the ctrl key and left click with your mouse. It’s far more convenient and easy.
  • To find the exact distance between two points, activate the ‘Distance Measurement Tool’ in Map Labs.

Now lets check a simple code which is easiest way to start learning about google map.

The following web page displays a map centered on Umang Software Technologies,Margao:

<!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 }
#map-canvas { height: 100% }
</style>
<script type=”text/javascript”
src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE”>
</script>
<script type=”text/javascript”>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(15.282146 ,73.980753),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map-canvas”),
mapOptions);
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id=”map-canvas”/>
</body>
</html>

Even in this simple example, there are a few things to note:
1. We declare the application as HTML5 using the declaration.
2. We include the Maps API JavaScript using a script tag.
3. We create a div element named “map-canvas” to hold the Map.
4. We create a JavaScript object literal to hold a number of map properties.
5. We write a JavaScript function to create a “map” object.
6. We initialize the map object from the body tag’s onload event.

Coming to explanation of these steps….

Declaring Your Application as HTML5:

<!DOCTYPE html>

Most current browsers will render content that is declared with this DOCTYPE in “standards mode” which means that your application should be more cross-browser compliant. The DOCTYPE is also designed to degrade gracefully; browsers that don’t understand it will ignore it, and use “quirks mode” to display their content.

Note that some CSS that works within quirks mode is not valid in standards mode and for that reason, we include the following <style> declaration:

<style type=”text/css”>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>

Loading the Google Maps API:

< script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE”>

The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Google Maps API. This script tag is required.
The key parameter contains your application’s API key. Note that this key is not the same key as used with the v2 API, and must be generated from the APIs console.

The sensor parameter of the URL must be included, and indicates whether this application uses a sensor (such as a GPS locator) to determine the user’s location. We’ve left this example as a variable set_to_true_or_false to emphasize that you must set this value to either true or false explicitly.

HTTPS:
If your application is an HTTPS application, you may instead wish to load the Google Maps JavaScript API over HTTPS:

< script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE”
  type=”text/javascript”></ scrip t>

Asynchronously Loading the API:
The following code instructs the application to load the Maps API after the page has fully loaded (using window.onload) and write the Maps JavaScript API into a <script> tag within the page. Additionally, we instruct the API to only execute theinitialize() function after the API has fully loaded by passing callback=initialize to the Maps API bootstrap:

function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(
15.282146 ,73.980753),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(“map-canvas”), mapOptions);
}
function loadScript() {
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize”;
document.body.appendChild(script);
}
window.onload = loadScript;


Map DOM Elements:

For the map to display on a web page, we must reserve a spot for it. Commonly, we do this by creating a named div element and obtaining a reference to this element in the browser’s document object model (DOM) ie the following line of code.

< div id=”map-canvas” style=”width: 100%; height: 100%”>


Map Options:

To initialize a Map, we first create a Map options object to contain map initialization variables. This object is not constructed; instead it is created as an object literal.

var mapOptions = {
center: new google.maps.LatLng(15.282146 ,73.980753),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};


Latitudes and Longitudes:

Because we want to center the map on a specific point, we create a LatLng object to hold this location by passing the location’s coordinates in the order { latitude, longitude }:

center = new google.maps.LatLng(15.282146 ,73.980753)


Zoom Levels:

The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution –

zoom: 8

Map Types:
You must specifically set an initial map type at this time as well

mapTypeId: google.maps.MapTypeId.ROADMAP

The Map Object:

var map = new google.maps.Map(document.getElementById(“map-canvas”), mapOptions);

This code defines a variable (named map) and assigns that variable to a new Map object, also passing in options defined within the mapOptions object literal. These options will be used to initialize the map’s properties

Loading the Map:

< body onload=”initialize()”>

To ensure that our map is placed on the page after the page has fully loaded, we only execute the function which constructs the Map object once theelement of the HTML page receives an onloadevent. Doing so avoids unpredictable behavior and gives us more control on how and when the map draws.

Some free app for your smart phone

Google navigation:
Google navigation

If you have an android device or an IPhone, this is a must have app. Reason: Google navigation allows you to look for a place – such as a hotel or shopping mall or even a local stop – and then, even provides you with detailed directions on how to get there. The app provides traffic conditions, alternate routes and is equipped with turn-by–turn voice direction so that you focus on driving.

Android, iOS | free

Google local:
Google local

On a trip to rome and hungry after the whole day of sightseeing? Try local to find the right place to dine. Part of Google maps, this is an app that makes easier to find useful places. Using your location info, it provides the info to nearby eating joints, ATMs, petrol pumps, coffee shops, hotels and tourist attractions. It is a very handy app but is only available for android devices and IPhones. People on Windows phone or BlackBerry can use Zomanto to find nearby places.

Android, iOS | free

Source : developers.google.com