To embed OpenStreetMap tiles as a layer within your map and use it as the default base layer, edit the file “functions.php” of you theme/child theme and add the following PHP code to it:
/**
* Progress Map.
* Embed OpenStreetMap tiles as a layer within the map */
function cspm_embed_osm_tiles($default, $map_id){
$output = "
plugin_map.gmap3({
map:{
options:{
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID,
'custom_style',
'OSM'
]
}
}
},
imagemaptype:{
id: 'OSM',
options:{
getTileUrl: function(coord, zoom) {
return 'http://tile.openstreetmap.org' + '/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
alt: 'OpenStreetMap layer',
name: 'OpenStreetMap',
minZoom: 0,
maxZoom: 19
},
callback: function(){
/**
* Remove the following line if you don't want to use ...
* ... OpenStreetMap as the default base layer of your map */
plugin_map.gmap3('get').setMapTypeId('OSM');
}
},
});
";
echo $output;
}
add_filter('cspm_after_map_load', 'cspm_embed_osm_tiles', 10, 2);