Какую карту использовать для зарубежных сайтов

Если вы создаете зарубежный географический проект, то я рекомендую использовать карты Openstreetmap. По качеству они не хуже Google или Яндекс.

Преимущество в том, что OpenstreetMap бесплатные. Вот как смотрится на моем сайте:

Базовый код для размещения карты

<div class="mapouter">
                    <div class="osm_canvas">
                        <iframe width="100%" height="560" id="osm_canvas" src="about:blank" frameborder="0"
                                scrolling="no" marginheight="0" marginwidth="0"></iframe>
                        <script>document.getElementById('osm_canvas').contentDocument.write('<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.min.css" />');
                            document.getElementById('osm_canvas').contentDocument.write('<script src = "https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.min.js"><\/script>');
                            document.getElementById('osm_canvas').contentDocument.write('<div id ="osm-map" style = "width:100%; height:560px;"></div>');
                            document.getElementById('osm_canvas').contentDocument.write('<script>var mapOptions={center:[{{$city->lat}}, {{$city->lng}}],zoom:15,attributionControl: true}; var map = new L.map("osm-map", mapOptions); map.attributionControl.setPrefix(\'&copy; <a target="_blank" href="https://www.openstreetmap.org/copyright" rel="nofollow noopener noreferrer">OpenStreetMap</a>\'); var layer = new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");map.addLayer(layer);let marker = new L.Marker([{{$city->lat}}, {{$city->lng}}]);marker.addTo(map).bindPopup(\'{{$city->city}}\'); marker.on(\'mouseover\',function(ev) {marker.openPopup();});<\/script>');
                            document.getElementById('osm_canvas').contentDocument.close();</script>
                        <style>.mapouter {
                                position: relative;
                                text-align: right;
                                height: 560px;
                                width: 100%;
                            }</style>
     
                        <style>.osm_canvas {
                                overflow: hidden;
                                background: none !important;
                                height: 560px;
                                width: 100%;
                            }</style>
                    </div>
                </div>

Замените {{$city->lat}} на десятичные координаты широты и {{$city->lng}} на десятичные координаты долготы, а {{$city->city}} на название географической точки.