Отображение Карт Google на HTML-странице - Fcodenotes

Чтобы отобразить Карты Google на веб-странице с помощью HTML, существует несколько способов. Вот несколько вариантов:

Встраивание Карт Google с помощью iFrame.
Вы можете встроить карту Google с помощью тега </code>, указав в качестве источника URL-адрес встраивания Карт Google. Вот пример:</p> <pre><code class="language-html"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158857.7638250014!2d-122.4194155!3d37.7749295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e58d394b2b3%3A0x29a13d0732b24b8d!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2sin!4v1567762880531!5m2!1sen!2sin" width="600" height="450" frameborder="0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></code></pre> </li> <li> <p>Использование API JavaScript Карт Google.<br />Google предоставляет API JavaScript для Карт, который позволяет настраивать карту и добавлять интерактивные функции. Вот пример:</p> <pre><code class="language-html"><div id="map" ></div> <script> function initMap() { var options = { center: { lat: 37.7749, lng: -122.4194 }, zoom: 8 }; var map = new google.maps.Map(document.getElementById('map'), options); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script></code></pre> </li> <li> <p>Использование плагина или библиотеки Карт Google.<br />Существует несколько сторонних плагинов и библиотек, которые упрощают процесс интеграции Карт Google в вашу HTML-страницу. Примеры: Leaflet, Mapbox и OpenLayers.</p> </li> </ol> </div> <footer class="entry-meta"> <section class="cat-links" itemprop="articleSection"> <span class="icon icon-category"></span>  Posted in <a href="https://fcodenotes.ru/category/programmirovanie/" rel="category tag">Программирование</a> </section> <section class="tags-links" itemprop="keywords"> <span class="icon icon-tag"></span>  Tagged <a href="https://fcodenotes.ru/tag/html/" rel="tag">HTML</a>, <a href="https://fcodenotes.ru/tag/vstraivanie-kart/" rel="tag">Встраивание карт</a>, <a href="https://fcodenotes.ru/tag/karty-gugl/" rel="tag">Карты Гугл</a> </section> <section class="permalink" itemprop="articleURL"> <span class="icon icon-permalink"></span>  <a href="https://fcodenotes.ru/otobrazhat-karty-google-na-html-stranice/" role="link" itemprop="url"> Permalink </a> </section> </footer> </article> <nav class="navigation post-navigation" role="navigation"> <h1 class="screen-reader-text">Post navigation</h1> <div class="nav-links"> <div class="nav-previous pull-left"><a href="https://fcodenotes.ru/vnedrit-schetchik-zagruzki-angular-dlya-vizualnoy-obratnoy-svyazi-v-prilozheniyah-angular/" rel="prev"><span class="meta-nav">← Внедрение счетчика загрузки Angular для визуальной обратной связи в приложениях Angular</span></a></div><div class="nav-next pull-right"><a href="https://fcodenotes.ru/metody-ispolzovaniya-klassov-i-identifikatorov-html-i-css/" rel="next"><span class="meta-nav">Методы использования классов и идентификаторов HTML и CSS →</span></a></div> </div> </nav> </main> </div> </div> </div> <footer id="footer" class="main-footer" role="contentinfo" itemtype="http://schema.org/WPFooter" itemscope="itemscope"> <div id="back-to-top"> <a href="#top" class="btn btn-primary btn-lg btn-block"> Back to top </a> </div> <div id="footer-sidebars" role="navigation" class="container"> <div id="sidebar-footer-1" class="widget-area col-sm-12" role="complementary"> <aside id="block-3" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Последние сообщения</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/osvoenie-centos-8-ustanovka-build-essential-i-raskrytie-vashego-potenciala-kodirovaniya/">Освоение CentOS 8: установка сборки и раскрытие вашего потенциала кодирования</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/osnovnye-shagi-po-ustanovke-sborki-essential-na-ubuntu-podrobnoe-rukovodstvo/">Основные шаги по установке build-essential в Ubuntu: подробное руководство</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/prostye-sposoby-ustanovki-build-essential-na-fedora-podrobnoe-rukovodstvo/">Простые способы установки Build-Essential в Fedora: подробное руководство</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/rukovodstvo-po-ustanovke-pytorch-bez-graficheskogo-processora-puteshestvie-dlya-nachinayushchih/">Руководство по установке PyTorch без графического процессора: путешествие для новичка</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://fcodenotes.ru/uluchshenie-zaprosov-python-s-pomoshchyu-tqdm-dlya-otslezhivaniya-progressa/">Улучшение запросов Python GET с помощью tqdm для отслеживания прогресса</a></li> </ul></div></div></aside><aside id="tag_cloud-2" class="widget widget_tag_cloud"><h4 class="widget-title">Метки</h4><hr class="separator" /><div class="tagcloud"><a href="https://fcodenotes.ru/tag/android-razrabotka/" class="tag-cloud-link tag-link-6456 tag-link-position-1" style="font-size: 10.905660377358pt;" aria-label="Android-разработка (1 063 элемента)">Android-разработка</a> <a href="https://fcodenotes.ru/tag/uglovoy/" class="tag-cloud-link tag-link-2797 tag-link-position-2" style="font-size: 9.8490566037736pt;" aria-label="Angular (883 элемента)">Angular</a> <a href="https://fcodenotes.ru/tag/css/" class="tag-cloud-link tag-link-2726 tag-link-position-3" style="font-size: 11.169811320755pt;" aria-label="CSS (1 133 элемента)">CSS</a> <a href="https://fcodenotes.ru/tag/trepetat/" class="tag-cloud-link tag-link-2528 tag-link-position-4" style="font-size: 15.924528301887pt;" aria-label="Flutter (2 581 элемент)">Flutter</a> <a href="https://fcodenotes.ru/tag/html/" class="tag-cloud-link tag-link-2727 tag-link-position-5" style="font-size: 10.377358490566pt;" aria-label="HTML (985 элементов)">HTML</a> <a href="https://fcodenotes.ru/tag/javascript/" class="tag-cloud-link tag-link-2531 tag-link-position-6" style="font-size: 20.811320754717pt;" aria-label="JavaScript (6 001 элемент)">JavaScript</a> <a href="https://fcodenotes.ru/tag/mysql/" class="tag-cloud-link tag-link-2537 tag-link-position-7" style="font-size: 11.301886792453pt;" aria-label="MySQL (1 136 элементов)">MySQL</a> <a href="https://fcodenotes.ru/tag/node-js/" class="tag-cloud-link tag-link-2774 tag-link-position-8" style="font-size: 9.7169811320755pt;" aria-label="Node.js (866 элементов)">Node.js</a> <a href="https://fcodenotes.ru/tag/php/" class="tag-cloud-link tag-link-2538 tag-link-position-9" style="font-size: 20.679245283019pt;" aria-label="Php (5 882 элемента)">Php</a> <a href="https://fcodenotes.ru/tag/postgresql/" class="tag-cloud-link tag-link-6884 tag-link-position-10" style="font-size: 9.188679245283pt;" aria-label="PostgreSQL (788 элементов)">PostgreSQL</a> <a href="https://fcodenotes.ru/tag/reagirovat/" class="tag-cloud-link tag-link-2685 tag-link-position-11" style="font-size: 10.905660377358pt;" aria-label="React (1 070 элементов)">React</a> <a href="https://fcodenotes.ru/tag/sql/" class="tag-cloud-link tag-link-6800 tag-link-position-12" style="font-size: 13.811320754717pt;" aria-label="SQL (1 779 элементов)">SQL</a> <a href="https://fcodenotes.ru/tag/wordpress/" class="tag-cloud-link tag-link-3932 tag-link-position-13" style="font-size: 11.962264150943pt;" aria-label="WordPress (1 301 элемент)">WordPress</a> <a href="https://fcodenotes.ru/tag/analiz-dannyh/" class="tag-cloud-link tag-link-7686 tag-link-position-14" style="font-size: 10.641509433962pt;" aria-label="Анализ данных (1 011 элементов)">Анализ данных</a> <a href="https://fcodenotes.ru/tag/veb-razrabotka/" class="tag-cloud-link tag-link-2741 tag-link-position-15" style="font-size: 19.754716981132pt;" aria-label="Веб-разработка (5 053 элемента)">Веб-разработка</a> <a href="https://fcodenotes.ru/tag/vizualizaciya-dannyh/" class="tag-cloud-link tag-link-4277 tag-link-position-16" style="font-size: 9.7169811320755pt;" aria-label="Визуализация данных (869 элементов)">Визуализация данных</a> <a href="https://fcodenotes.ru/tag/golang/" class="tag-cloud-link tag-link-4285 tag-link-position-17" style="font-size: 8.1320754716981pt;" aria-label="Голанг (666 элементов)">Голанг</a> <a href="https://fcodenotes.ru/tag/dart/" class="tag-cloud-link tag-link-5889 tag-link-position-18" style="font-size: 8.3962264150943pt;" aria-label="Дарт (693 элемента)">Дарт</a> <a href="https://fcodenotes.ru/tag/dzhava/" class="tag-cloud-link tag-link-6866 tag-link-position-19" style="font-size: 10.377358490566pt;" aria-label="Джава (979 элементов)">Джава</a> <a href="https://fcodenotes.ru/tag/dzhango/" class="tag-cloud-link tag-link-3733 tag-link-position-20" style="font-size: 8.1320754716981pt;" aria-label="Джанго (662 элемента)">Джанго</a> <a href="https://fcodenotes.ru/tag/kotlin/" class="tag-cloud-link tag-link-15452 tag-link-position-21" style="font-size: 9.4528301886792pt;" aria-label="Котлин (837 элементов)">Котлин</a> <a href="https://fcodenotes.ru/tag/laravel/" class="tag-cloud-link tag-link-3035 tag-link-position-22" style="font-size: 19.490566037736pt;" aria-label="Ларавел (4 797 элементов)">Ларавел</a> <a href="https://fcodenotes.ru/tag/linuks/" class="tag-cloud-link tag-link-2542 tag-link-position-23" style="font-size: 9.3207547169811pt;" aria-label="Линукс (817 элементов)">Линукс</a> <a href="https://fcodenotes.ru/tag/manipulyacii-s-massivami/" class="tag-cloud-link tag-link-2932 tag-link-position-24" style="font-size: 9.9811320754717pt;" aria-label="Манипуляции с массивами (908 элементов)">Манипуляции с массивами</a> <a href="https://fcodenotes.ru/tag/mashinopis/" class="tag-cloud-link tag-link-2792 tag-link-position-25" style="font-size: 13.811320754717pt;" aria-label="Машинопись (1 789 элементов)">Машинопись</a> <a href="https://fcodenotes.ru/tag/pandy/" class="tag-cloud-link tag-link-7681 tag-link-position-26" style="font-size: 8.5283018867925pt;" aria-label="Панды (705 элементов)">Панды</a> <a href="https://fcodenotes.ru/tag/poisk-neispravnostey/" class="tag-cloud-link tag-link-2965 tag-link-position-27" style="font-size: 16.320754716981pt;" aria-label="Поиск неисправностей (2 776 элементов)">Поиск неисправностей</a> <a href="https://fcodenotes.ru/tag/primery-koda/" class="tag-cloud-link tag-link-2776 tag-link-position-28" style="font-size: 18.433962264151pt;" aria-label="Примеры кода (4 004 элемента)">Примеры кода</a> <a href="https://fcodenotes.ru/tag/programmirovanie-na-python/" class="tag-cloud-link tag-link-5333 tag-link-position-29" style="font-size: 9.9811320754717pt;" aria-label="Программирование на Python (903 элемента)">Программирование на Python</a> <a href="https://fcodenotes.ru/tag/rubin-na-relsah/" class="tag-cloud-link tag-link-9519 tag-link-position-30" style="font-size: 8.7924528301887pt;" aria-label="Рубин на рельсах (735 элементов)">Рубин на рельсах</a> <a href="https://fcodenotes.ru/tag/s/" class="tag-cloud-link tag-link-2569 tag-link-position-31" style="font-size: 10.641509433962pt;" aria-label="С# (1 031 элемент)">С#</a> <a href="https://fcodenotes.ru/tag/s-2/" class="tag-cloud-link tag-link-2705 tag-link-position-32" style="font-size: 9.188679245283pt;" aria-label="С++ (799 элементов)">С++</a> <a href="https://fcodenotes.ru/tag/ubuntu/" class="tag-cloud-link tag-link-2535 tag-link-position-33" style="font-size: 8.1320754716981pt;" aria-label="Убунту (665 элементов)">Убунту</a> <a href="https://fcodenotes.ru/tag/upravlenie-bazoy-dannyh/" class="tag-cloud-link tag-link-3023 tag-link-position-34" style="font-size: 13.415094339623pt;" aria-label="Управление базой данных (1 644 элемента)">Управление базой данных</a> <a href="https://fcodenotes.ru/tag/baza-dannyh/" class="tag-cloud-link tag-link-3149 tag-link-position-35" style="font-size: 8.7924528301887pt;" aria-label="база данных (738 элементов)">база данных</a> <a href="https://fcodenotes.ru/tag/komandnaya-stroka/" class="tag-cloud-link tag-link-5609 tag-link-position-36" style="font-size: 8.7924528301887pt;" aria-label="командная строка (735 элементов)">командная строка</a> <a href="https://fcodenotes.ru/tag/manipulyaciya-dannymi/" class="tag-cloud-link tag-link-7693 tag-link-position-37" style="font-size: 10.905660377358pt;" aria-label="манипуляция данными (1 075 элементов)">манипуляция данными</a> <a href="https://fcodenotes.ru/tag/manipulyaciya-so-strokami/" class="tag-cloud-link tag-link-2660 tag-link-position-38" style="font-size: 14.603773584906pt;" aria-label="манипуляция со строками (2 040 элементов)">манипуляция со строками</a> <a href="https://fcodenotes.ru/tag/obrabotka-oshibok/" class="tag-cloud-link tag-link-2843 tag-link-position-39" style="font-size: 13.415094339623pt;" aria-label="обработка ошибок (1 641 элемент)">обработка ошибок</a> <a href="https://fcodenotes.ru/tag/piton/" class="tag-cloud-link tag-link-2527 tag-link-position-40" style="font-size: 22pt;" aria-label="питон (7 491 элемент)">питон</a> <a href="https://fcodenotes.ru/tag/programmirovanie/" class="tag-cloud-link tag-link-2717 tag-link-position-41" style="font-size: 17.641509433962pt;" aria-label="программирование (3 468 элементов)">программирование</a> <a href="https://fcodenotes.ru/tag/programmirovanie-na-yazyke-r/" class="tag-cloud-link tag-link-7842 tag-link-position-42" style="font-size: 10.11320754717pt;" aria-label="программирование на языке R (939 элементов)">программирование на языке R</a> <a href="https://fcodenotes.ru/tag/razrabotka-igr/" class="tag-cloud-link tag-link-6784 tag-link-position-43" style="font-size: 8.1320754716981pt;" aria-label="разработка игр (658 элементов)">разработка игр</a> <a href="https://fcodenotes.ru/tag/razrabotka-programmnogo-obespecheniya/" class="tag-cloud-link tag-link-5001 tag-link-position-44" style="font-size: 11.433962264151pt;" aria-label="разработка программного обеспечения (1 176 элементов)">разработка программного обеспечения</a> <a href="https://fcodenotes.ru/tag/yazyki-programmirovaniya/" class="tag-cloud-link tag-link-2903 tag-link-position-45" style="font-size: 8pt;" aria-label="языки программирования (639 элементов)">языки программирования</a></div> </aside> </div> </div> <hr class="separator" /> <div role="navigation" class="container"> <div id="credits" class="site-info credits col-sm-6"> <p>Copyright © 2025 <a href="https://fcodenotes.ru">Fcodenotes - блог о программировании</a>. Powered by <a href="http://www.wordpress.org/" class="wp-url">WordPress</a> and <a href="http://github.com/andrezrv/follet" class="theme-url">Follet</a>.</p> </div> <div id="social-menu" class="col-sm-6"> </div> </div> </footer> </div> <noscript> <div> <img src="https://mc.yandex.ru/watch/97324100" style="position:absolute; left:-9999px;" alt=""/> </div> </noscript> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/follet/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" id="rtrar.appLocal-js-extra"> /* <![CDATA[ */ var rtafr = {"rules":""}; //# sourceURL=rtrar.appLocal-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/plugins/real-time-auto-find-and-replace/assets/js/rtafar.local.js?ver=1.5.9" id="rtrar.appLocal-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/includes/follet-core/includes/bootstrap/js/bootstrap.min.js?ver=3.1.1" id="follet-bootstrap-js-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/skip-link-focus-fix.min.js?ver=20130115" id="follet-skip-link-focus-fix-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/back-to-top.min.js?ver=1.1.1" id="follet-back-to-top-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/bootstrap-support.min.js?ver=1.1.1" id="follet-bootstrap-support-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/content-sidebar-height.min.js?ver=1.1.1" id="follet-content-sidebar-height-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/top-navigation-searchform.min.js?ver=1.1.1" id="follet-top-navigation-searchform-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/themes/follet/js/min/resize-videos.min.js?ver=1.1.1" id="follet-resize-videos-js"></script> <script type="text/javascript" src="https://fcodenotes.ru/wp-content/plugins/real-time-auto-find-and-replace/assets/js/rtafar.app.min.js?ver=1.5.9" id="rtrar.app-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://fcodenotes.ru/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://fcodenotes.ru/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> </body> </html>