dougv.net « Doug Vanderweide's ASP.NET demos

Demonstration of how to dynamically add JavaScript to an ASP.NET master page, from an ASP.NET child page, so that the scripts only apply to that child page. This method should work for all versions of ASP.NET up to version 3.5.

Page Code

            <div id="map">
	            This is where the map will appear.
            </div>
        

Code Behind

            Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) Handles Me.Load
	            ImportGMapLibrary()
	            ImportGMapScript()
            End Sub

            Sub ImportGMapLibrary()
	            'create Google Maps API library script tag
	            Dim objLibrary As New HtmlGenericControl("script")

	            'add attributes
	            objLibrary.Attributes.Add("type", "text/javascript")
	            objLibrary.Attributes.Add("src", "http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAynoIQZ5YX-BdZ9UvBsREmBRZz1l8SlBkcLc8c82DcC4MDIosshQLjjGtypnNhjFkfxXwjfObtAgcyw")

	            'add to master page
	            Master.Page.Header.Controls.Add(objLibrary)
            End Sub

            Sub ImportGMapScript()
	            'create Google Maps API library script tag
	            Dim objScript As New HtmlGenericControl("script")

	            'add attributes
	            objScript.Attributes.Add("type", "text/javascript")
	            objScript.Attributes.Add("src", "/demos/add_js_to_master_page/map.js")

	            'add to master page
	            Master.Page.Header.Controls.Add(objScript)
            End Sub
        

JavaScript: map.js

            function makeMap() {
	            if (GBrowserIsCompatible()) {
		            // get the div which will contain the map
		            var mapDiv = document.getElementById("map");
		            // set div padding to 0; resize for map
		            mapDiv.style.padding = "0";
		            mapDiv.style.width = "780px";
		            mapDiv.style.height = "400px";

		            // place map on page
		            var map = new GMap2(mapDiv);
            		
		            // create point for ball of twine
		            var point = new GLatLng(39.50933, -98.433734);

		            // center map at point of interest
		            map.setCenter(point, 16);

		            //use default controls
		            map.setUIToDefault();
            		
		            // create market for ball of twine
		            var marker = new GMarker(point);
		            // add marker to map
		            map.addOverlay(marker);

		            // create infoWindow HTML string
		            var infoString = "<p><strong>The World's Largest Ball Of Twine</strong> is right here, in <a href=\"http://www.roadsideamerica.com/story/8543\">Cawker City, KS!</a></p>";
            		
		            // add info window for marker
		            map.openInfoWindowHtml(point, infoString);
            		
		            // add event listener to toggle info window on marker click
		            GEvent.addListener(marker, "click", function() {
	                    var info = map.getInfoWindow();
	                    if (info.isHidden()) {
                            info.show();
                            map.openInfoWindowHtml(point, infoString);
	                    } 
	                    else {
                            info.hide();
	                    }
		            });
	            }
            }

            window.onload = makeMap;