Blog Bug's

bugging blogs

…on Maps API (Google 1.x, Google 2.x, & OSM) – Javascript with Paths

Google 2.x

	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA8Hm0UjfAUlzqtm8C4hrYcRRHdNuSbQjBWSHvxpsS-elLV0ZwthR9fApc1xrVNPI-YmmRt62mP-Ifag">
	</script>
	<script type="text/javascript">
		google.load("maps", "2.x");
		function initialize() {
			var map3a = new google.maps.Map2(document.getElementById("map3a"));
			var polyline = new GPolyline(
				[
					new GLatLng(14.647185,121.068959),
					new GLatLng(14.648783,121.069002),
					new GLatLng(14.648638,121.068637)
				], 
				"#ff0000", 
				5
			);
			map3a.addOverlay(polyline);				
			map3a.setCenter(new google.maps.LatLng(14.648552,121.068553), 17);
		}
		google.setOnLoadCallback(initialize);
	</script>
	<div id="map3a" style="height: 400px; width: 400px;"></div>


OSM

	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script>
		var init = function() {
			var map3b = new OpenLayers.Map("map3b");
			var mapnik = new OpenLayers.Layer.OSM();
			map3b.addLayer(mapnik);
			var geometry = new OpenLayers.Geometry.LineString(
				[
					new OpenLayers.Geometry.Point(121.068959,14.647185).transform(
						new OpenLayers.Projection("EPSG:4326"),
						new OpenLayers.Projection("EPSG:900913")
					),
					new OpenLayers.Geometry.Point(121.069002,14.648783).transform(
						new OpenLayers.Projection("EPSG:4326"),
						new OpenLayers.Projection("EPSG:900913")
					),
					new OpenLayers.Geometry.Point(121.068637,14.648638).transform(
						new OpenLayers.Projection("EPSG:4326"),
						new OpenLayers.Projection("EPSG:900913")
					)
				]
			);
			var feature = new OpenLayers.Feature.Vector(
				geometry, 
				null,
				{
					strokeColor: "#ff0000",
					strokeOpacity: 0.7,
					strokeWidth: 5
				}
			);
			var vectors = new OpenLayers.Layer.Vector("Vectors");
			vectors.addFeatures(feature);
			map3b.addLayer(vectors);
			var lonLat = new OpenLayers.LonLat(121.068553,14.648552).transform(
				new OpenLayers.Projection("EPSG:4326"),
				new OpenLayers.Projection("EPSG:900913")
			);
			map3b.setCenter(lonLat, 17);
		}
		addOnLoadEvent(init);
    </script>
	<div id="map3b" style="height: 400px; width: 400px"></div>


refresh if no map rendered

posted by ninoy in CS 297 and have No Comments

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment