The jQuery Geo plugin has one widget, geomap, that you can instantiate on any div with a computable width and height.


<div id="map" style="width: 640px; height: 480px;"></div>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//code.jquerygeo.com/jquery.geo-1.0.0-rc1.min.js"></script>



By default, this one line of code will create a fully functional map on your page showing the whole world and using OpenStreetMap data.

The default units are longitude & latitude degrees which is the most common format for GPS and other online spatial data. You can set the center and zoom of the map at the same time you initialize it by passing a JavaScript object of options.

  center: [ -71.037598, 42.363281 ],
  zoom: 10

Please note that longitude is the first value in the array, even though it is commonly spoken second. This plugin does not distinguish between lon/lat and any other x/y coordinate system.

The above example will show the City of Boston. The value passed to the center property is a GeoJSON position, which is an array with an x value followed by a y value.

If you need help determining the center point values the events example can help. Pan and zoom the map to an area and click the location you want. Then copy the coordinates value displayed under the geo argument heading of the click event and paste it into you code.