Displaying Latitude and Longitude on Google Map Api

Question

I want to show latitude and longitude lines/grid on a java script code I created using google maps api but I am unable to show the exact latitude and longitude positions. I tried to use overlay map type which shows a pixel grid but not a latitude and longitude grid

https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay , this what I used

Answer 1

Starting with the overlayMapType-example you may calculate the Point of the top-left corner of the tile based on the tile-coordinate and convert this point into a LatLng via the method fromPointToLatLng of the map-projection:

 function initialize() { var map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 17, center: new google.maps.LatLng(52.549878, 13.425209) }); function CoordMapType(tileSize) { this.tileSize = tileSize; } CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var f = Math.pow(2, zoom), t = this.tileSize, w = t.width, h = t.height, n = ownerDocument.createElement('div'), //calculate the point of the top-left tile-corner p = new google.maps.Point( ((w * (coord.x / f)) + w) % w, ((h * (coord.y / f)) + h) % h ); //dont draw redundant tiles if (coord.y < 0 || coord.y >= f) return n; //print coordinates n.innerHTML = '<span>' + map.getProjection().fromPointToLatLng(p).toUrlValue() + '</span>'; n.style.width = w + 'px'; n.style.height = h + 'px'; n.className = 'tile'; return n; }; map.overlayMapTypes.insertAt( 0, new CoordMapType(new google.maps.Size(256, 256))); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } .tile { border: 1px solid #aaa; } .tile span { background: #fff; font: 12px Monospace; } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <div id="map-canvas"></div> 

Answer 2

Perhaps this library does what you want?

https://github.com/alexcheng1982/google-maps-gridlines