Merhaba, forumun yeni üyesiyim, JS öğrenmeye çalışıyorum, pratik olsun diye uğraşılarımdan biri de bu konuydu ve hala bazı kısımları çözmüş değilim.
Fikri olan dediğin için şunu şuraya bırakayım.
Harita bu şekilde çekiliyor.
Tabii kullanabilmek için Google'dan key alman gerek.

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvtoCyrMlbYG-Y2d4Uqrdrm30T3xuW0j8&callback=initMap"
    async defer></script>

Pinleme olayı için böyle bi fonksiyon var.

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39, lng: 35.5},
zoom: 6.6
});

var izmir = {lat: 38.426569, lng: 27.139496};
var izmmarker = new google.maps.Marker({position: izmir, map: map});