Code Clues: Google map

Friday, 14 December 2012

Creating Marker / Overlays in Google Map

Overlays in Google maps are used to point to a specific location that we point to. It is an easy task. Here in this tutorial I'm only stressing at creating Overlays , if any doubt regarding creating maps please refer to my previous post.

So lets get started.
Overlays are objects on the map that are bound to latitude/longitude coordinates.Google maps has several types of overlays: Marker, Polyline, Polygon, Circle, Rectangle etc.

Google Maps - Add a Marker

Add the marker to the map by using the setMap() method:
See demo

<script>

var myCenter=new google.maps.LatLng(9.9667,76.2167);

function initialize()

{

var mapProp = {

  center:myCenter,

  zoom:5,

  mapTypeId:google.maps.MapTypeId.ROADMAP

  };



var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);



//Marker

var marker=new google.maps.Marker({

  position:myCenter,

});

marker.setMap(map);

}

//End

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Animating Marker

Applying animation property to the marker.
See demo

marker=new google.maps.Marker({

  position:myCenter,

  animation:google.maps.Animation.BOUNCE

  });

marker.setMap(map);

Thank You!

Creating Google Maps using API

Creating a Basic Google Map

Here we going to discuss about creating Google maps with API. API means 'Application Program Interface'. Before proceeding to the tutorial for the maps to work an API key is needed which can be received free of cost from Google.

In this section I will explain you how to create a basic Google Map. Its easy, just try it out...,

See demo

<!DOCTYPE html>

<html>

<head>

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

</script>



<script>

function initialize()

{

var mapProp = {

  center:new google.maps.LatLng(9.9667,76.2167),

  zoom:5,

  mapTypeId:google.maps.MapTypeId.ROADMAP

  };

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

  ,mapProp);

}



google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>



<body>

<div id="googleMap" style="width:500px;height:380px;"></div>



</body>

</html>

Code Explanation

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

This tag is required to include Google Maps API. key=<YOUR_API_KEY> , enter you API key provided.

The "sensor" attribute can be true or false.

var mapProp = {

      center:new google.maps.LatLng(9.9667,76.2167),

      zoom:5,

      mapTypeId:google.maps.MapTypeId.ROADMAP

  };

"center" property decides were to center the map depending upon the latitude and longitude given.

"zoom" decides the initial zoom level of the map.

"mapTypeId" property specifies the map type. It can be ROADMAP, HYBRID, TERRAIN and so on..,

Finally on execution the map will be shown on the specified target.

Its all about creating a basic Google Map. If any suggestions or help please use the comments area.

Thank You!

Pages

Friday, 14 December 2012

Creating Marker / Overlays in Google Map

Creating Google Maps using API

Creating a Basic Google Map