Переключение между Google Maps и OpenStreet Maps. js

суть проблемы, у меня имеется две карты Google Maps и OpenStreet Maps, пытаюсь реализовать переключение между ними. Существует общий скрипт, который обрабатывает переключение

function mapChange(id) {
if(id == 1){
    $('#google-map').css('visibility','visible');
    $('#google-map').css('display','block');
    $('#osm-map').css('visibility','hidden');
    $('#osm-map').css('display','none');
    active_map= 1;
    url= 'js/google.js';
    document.write('<script src="' + url + '"><\/script>');

    url= 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&callback=initMapGoogle&key=key';
    document.write('<script src="' + url + '" async defer><\/script>');
}
else if(id == 2){
    $('#google-map').css('visibility','hidden');
    $('#google-map').css('display','none');
    $('#osm-map').css('visibility','visible');
    $('#osm-map').css('display','block')
    active_map= 3;

    url= 'http://www.openlayers.org/api/OpenLayers.js';
    $('#Head').append('<script type="text/javascript" src="' + url + '"><\/script>');

    url= 'js/osm.js';
    $('#Head').append('<script type="text/javascript" src="' + url + '"><\/script>');
}

}

По умолчанию грузится GoogleMaps mapChange(1);

Выбор происходит в обычном меню по нажатию на определенный пункт onclick="mapChange(2)"

Отрисовка должна начаться после загрузки DOM

$(function() {
    map = new OpenLayers.Map("osm-map");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
});

В конце файла map.html написаны дивы для работы <div id="google-map"></div> и <div id="osm-map" style="width:100%; height:100%; visibility:hidden; display:none;"></div>

Я добавлял и в конец body, и в head, и комбинировал один в head, а другой в конец body, но проблема все та же Uncaught ReferenceError: OpenLayers is not defined

Благодарю всех, кто отклинется на помощь