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