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