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