Help with inserting OSM on webpage

General talk
1

I’m using Joomla with joomgllery plug-in wich is very popular in Joomla community. This plug-in is helping with creating and managing gallery. There is a feature to view map under image that had in exif info about latitude and longitude. Default is using google maps. I would like to use OSM with mapnik layer. I wrote in joomgallery community to help me. They didn’t know exactly how. They point me a fragment of code, to adapt for OSM.
Here it is:

<div id="jg_geomap">
        <script type="text/javascript">
          if (GBrowserIsCompatible())
          {
            var map = new GMap2(document.getElementById('jg_geomap'));
            var mapcenter = new GLatLng(<?php echo $this->mapdata; ?>);
            map.setCenter(mapcenter, 13);
            map.addOverlay(new GMarker(mapcenter));
            map.setUIToDefault();
          }
          else
          {
            document.write(Joomla.JText._('COM_JOOMGALLERY_DETAIL_MAPS_BROWSER_IS_INCOMPATIBLE'));
          }
        </script>
      </div>

Is there possibility to adapt this code for OSM ?

2

The code fragment seems to use Google Maps API 2.0. Do you want to keep using Google’s Javascript and just exchange the tile layer? There is an example for that here: http://wiki.openstreetmap.org/wiki/Google_Maps_Example

So with your example, maybe it’s enough to replace

var map = new GMap2(document.getElementById('jg_geomap'));

with

var copyOSM = new GCopyrightCollection("<a href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>");
copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
 
var tilesMapnik = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
var mapMapnik = new GMapType([tilesMapnik],     G_NORMAL_MAP.getProjection(), "Mapnik");
var map = new GMap2(document.getElementById('jg_geomap'), { mapTypes: [mapMapnik] );

? Not sure, though, as I’ve not used that API myself.

If you want to use a different Javascript API instead of Google’s, you would probably want to look at OpenLayers or Leaflet.