JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=en_US"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://kashey.ru/maps/regions.js?4"></script>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
JavaScript
var myMap;
ymaps.ready(init);
function Gzoom(map,data) {
function processPoints(geometry, callback, thisArg) {
if (geometry instanceof google.maps.LatLng) {
callback.call(thisArg, geometry);
} else if (geometry instanceof google.maps.Data.Point) {
callback.call(thisArg, geometry.get());
} else {
geometry.getArray().forEach(function(g) {
processPoints(g, callback, thisArg);
});
}
}
var bounds = new google.maps.LatLngBounds();
data.forEach(function(feature) {
processPoints(feature.getGeometry(), bounds.extend, bounds);
});
map.fitBounds(bounds);
}
function init () {
var mtype='G';
if(mtype=='Y'){
myMap = new ymaps.Map('map', {
center: [55.76, 37.64], // Москва
zoom: 10
});
}else{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(55.76, 37.64)
};
myMap = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
var geoMap=myMap;
osmeRegions.geoJSON('US-CA', {
lang: 'en',
quality:0,
scheme: {
165475:function (region){
return region.hasBorderWith(396487) && region.osmId!=396487
}
},
postFilter: function (region){
return region.osmId==165475;
}
}, function (data, pure) {
if(mtype=='Y'){
collection = osmeRegions.toYandex(data, ymaps);
collection.add(geoMap);
geoMap.setBounds(collection.collection.getBounds(), {duration: 300});
}else{
collection = osmeRegions.toGoogle(data);
collection.add(geoMap);
Gzoom(geoMap,collection.collection);
}
});
}