Working with Google Map and add marker and lines on Map.

This tutorial is explaining how to start with Google Map.

1) First create a account on developer console and create project and generate public key.
2) Create a html page.

<!DOCTYPE html>
<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%}
<div id="map-canvas"></div>
<script src="//"></script>
<script src=""></script>
<script src="js/"></script>
<script src="js/"></script>


2) Add marker on Map

var mapElement=$("#map-canvas");
var latLog="latitude, longitude";
mapElement.gmap('addMarker', {'position': latLog, 'bounds': true}).click(function() {
mapElement.gmap('openInfoWindow', {'content': "Information  about marker"}, this);

If you want to animated marker use animation:google.maps.Animation.BOUNCE

mapElement.gmap('addMarker', {'position': latLog, 'bounds': true,animation:google.maps.Animation.BOUNCE}).click(function() {
mapElement.gmap('openInfoWindow', {'content': "Information  about marker"}, this);

3)Draw line on Map

var coordinates=["latitude, longitude", "latitude1, longitude1"];
mapElement.gmap('addShape', 'Polyline', {
'path': coordinates,
'strokeColor': '#ff0000',
'strokeThickness': 5,
'strokeDashArray': '5 2'