|
|
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Common Loader</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://www.northmiamicra.org/util.js"></script> <script type="text/javascript" src="http://www.northmiamicra.org/infobox.js"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(25.89503,-80.18504); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.TERRAIN } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //var ctaLayer = new google.maps.KmlLayer('http://www.northmiamicra.org/Kmls/zoning.kml'); //ctaLayer.preserveViewport = true; //ctaLayer.setMap(map); downloadUrl("http://www.northmiamicra.org/NOMIZoningLabels.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var labelText = markers[i].getAttribute("town"); var myOptions2 = { content: labelText ,boxStyle: { border: "0px solid black" ,textAlign: "center" ,fontSize: "14pt" ,fontWeight: "bold" ,color: "#000000" ,width: "80px" } ,disableAutoPan: true ,pixelOffset: new google.maps.Size(-25, 0) ,position: latlng ,closeBoxURL: "" ,isHidden: false ,pane: "mapPane" ,enableEventPropagation: true }; var ibLabel = new InfoBox(myOptions2); ibLabel.open(map); //var marker = new google.maps.Marker({position: latlng, map: map}); } }); } </script> </head> <body onLoad="initialize();"> <div id="map_canvas" style="width:800px; height:600px"></div> </body> </html> |