How Can I add Latitude, Longitude dynamically in Javascript?

Add server-side latitude/longitude values to Google Map javascript

• I'm trying to add a Google map to one of my pages. In my code-behind, I have a center point for the map, and an array of latitudes/longitudes that I'd like to map: protected void Page_Load(object sender, EventArgs e) { Point center = new Point { latitude = 28.42693F, longitude = -81.4673F }; List<Point> points = new List<Point>(); points.Add(new Point { latitude = 28.43039F, longitude = -81.47186F }); points.Add(new Point { latitude = 28.36906F, longitude = -81.56063F }); Point[] pointArray = points.ToArray(); } public class Point { public float latitude; public float longitude; } On my page, I have this javascript: <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(28.42693, -81.4673), 13); //map.setUIToDefault(); var blueIcon = new GIcon(G_DEFAULT_ICON); blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"; markerOptions = { icon: blueIcon }; var point = new GLatLng(28.43039, -81.47186); map.addOverlay(new GMarker(point, markerOptions)); point = new GLatLng(28.36906, -81.56063); map.addOverlay(new GMarker(point, markerOptions)); } } </script> The values are hardcoded into the javascript right now for testing, but I need to get the dynamic values from the code-behind. How can I do that?

• Answer:

  One quick and dirty approach could be to create a string in your code-behind that creates a JavaScript array of lat/long values. You could then add an in your .ASPX and set it to your string value. Or create a JSON representation of your points. It works well for small one-off scenarios. So your JavaScript might wind up looking like this: <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); <asp:Literal id="litMapCenter" runat="server"/> //map.setUIToDefault(); var blueIcon = new GIcon(G_DEFAULT_ICON); blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"; markerOptions = { icon: blueIcon }; <asp:Literal id="litMapPoints" runat="server"/> } } </script> In your code-behind you then set litMapPoints and litMapCenter with the appropriate JavaScript.