How To Show Info Window in Google Map When Click on Marker in Asp.net Website Using JavaScript in HTML And C# ASP.net
Program:
.Aspx File
Program:
.Aspx File
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> google maps</title> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(21.195, 72.819443999999999999), // This is used to center the map to show our markers zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, marker: true }; var myLatlng = new google.maps.LatLng(22.195, 72.819443999999999999) var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, title: "Chennai" }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content: "Ghod Dod Road,<br /> Surat,<br /> 395001,<br /><b>Gujarat</b>" }); infowindow.open(map, marker); google.maps.event.addListener(marker, "click", function (e) { infowindow.open(map, marker); }); } </script> </head> <body onload="initialize()"> <form id="form1" runat="server"> <div id="map_canvas" style="width: 500px; height: 400px"></div> </form> </body> </html> |
Demo:
|
No comments:
Post a Comment