Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Plot points on map in Openlayers with USGS and Google Maps Support
* @var lat = latitude
* @var lng = Longitude
* @var id = plotting multiple maps on a map
* If you are just using one map, you can remove the ID from here
* Logical function to plot points on openlayers map with support of USGS and Google Maps
function openMap(lat, lng, id) {
var layer;
//GPS boundaries for USGS map
var layerExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
restrictedExtent: layerExtent
//If you are just plotting one point, you can remove the ID from here
map[id] = new OpenLayers.Map( 'map'+id, options );
//Next five "lines" define each layer the map supports
gphy = new OpenLayers.Layer.Google(
"Google Terrain",
{type: google.maps.MapTypeId.TERRAIN}
gmap = new OpenLayers.Layer.Google(
"Google Streets",
{numZoomLevels: 20}
ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
topo = new OpenLayers.Layer.XYZ(
"USA Topo Map",
{sphericalMercator: true, numZoomLevels: 16}
//Add each of the mapping capabilities
map[id].addLayers([topo, gphy, gmap, ghyb, gsat]);
var lonlat = new OpenLayers.LonLat(lng, lat).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map[id].getProjectionObject() // to Spherical Mercator
//Define the style of the point
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
styleMap: new OpenLayers.StyleMap({
fillColor : 'red',
fillOpacity : 0.8,
strokeColor : "#ee9900",
strokeOpacity : 1,
strokeWidth : 1,
pointRadius : 8
//Create the new point
point = new OpenLayers.Geometry.Point(lonlat.lon,;
vectors.addFeatures([new OpenLayers.Feature.Vector(point)]);
//Add the point as a new layer on the map
//Add the control navigiation to switch between Google maps and USGS topo map
map[id].addControl(new OpenLayers.Control.LayerSwitcher());
//Center the map on the point and do a zoom of 15
map[id].setCenter(lonlat, 15 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment