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
Place your comment