Add marker and lines on Google Map

by | Mar 2, 2014 | jQuery | 0 comments

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>
<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>
    </head>
<body>
<div id="map-canvas"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false"></script>
<script src="js/jquery.google.map.js"></script>
<script src="js/jquery.ui.map.overlays.js"></script>

</body>
</html>

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'
        });