How To Add Multiple Markers to Google Maps V3 using JSON with JavaScript in Website HTML 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>Show/Add multiple markers to Google Maps in asp.net website</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 markers = [ { "title": "Chennai", "lat": 12.897489183755905, "lng": 80.2880859375, "description": "Chennai" }, { "title": "Hyderabad", "lat": 17.26672782352052, "lng": 78.5302734375, "description": "Hyderabad" }, { "title": "Bangalore", "lat": 12.897489183755905, "lng": 77.51953125, "description": "Bangalore" }, { "title": "visakhapatnam", "lat": 17.518344187852207, "lng": 83.3203125, "description": "visakhapatnam" }]; var mapOptions = { center: new google.maps.LatLng(11.44, 78.79), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } } </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