How to set up Google Maps code on Blogger-WordPress website

...........

Copy the under code and paste Blogptot (Configure HTML/JavaScript) content box Your site.

..........................................................................................................................................

<!--Responsive Google Map Embed (Desktop + Mobile optimized)-->
<style>
.map-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Default: 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Will look small on mobile/মোবাইলে ছোট দেখাবে */
@media (max-width: 600px) {
  .map-wrapper {
    padding-bottom: 75%; /* Aspect ratio বাড়িয়ে ছোট দেখাবে/It will make you look smaller. */
    max-width: 280px; /* Maximum width limited/সর্বোচ্চ প্রস্থ সীমিত */
    margin: auto; /* Will show you the center/সেন্টার করে দেখাবে */
  }
}
</style>

<div class="map-wrapper">

    <iframe allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"

/* Put your map link after src tag*/

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7497568.591071524!2d85.04603046376756!3d23.42717873301276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30adaaed80e18ba7%3A0xf2d28e0c4e1fc6b!2sBangladesh!5e0!3m2!1sen!2sbd!4v1757304038261!5m2!1sen!2sbd">
    </iframe>

</div>

....................................................................................................................................

*If the map does not show, type the code shown in the image below in the Configure HTML/JavaScript content box. Replace the Src tag with your map link. Hope it works. Thank you.

*যদি না হয় ম্যাপ শো না করে তবে নিচের ছবিতে দেখানো কোড Configure HTML/JavaScript কনটেন্ট বক্সে  টাইপ করে দিন। Src tag এর স্থানে আপনার ম্যাপ লিং দিন। হয়ে যাবে আশা করি। ধন্যবাদ।