Change map gg

In this example below you will see how to do a Change map gg with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by httpdoan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright httpdoan ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Change map gg</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
      <section class="wrap-map">
        <div class="address-list">
        <ul class="scroll-theme" id="listMapID" data-map-lat="10.754018" data-map-lng="106.740176">
            <li data-map-lat="10.754018" data-map-lng="106.740176">
                <p class="bold"><b>Viễn thông Quốc tế FPT</b></p>
                <p><b>Địa chỉ:</b> Tòa nhà FPT, Lô L.29B-31B-33B đường Tân Thuận, Khu chế xuất Tân Thuận, phường Tân Thuận Đông, quận 7, TP Hồ Chí Minh.
                    <br><b>Hotline:</b> <a href="tel:1900 6973">1900 6973</a>
                </p>
            </li>

            <li data-map-lat="21.028435371671726" data-map-lng="105.78058935714716">
                <p class="bold"><b>Viễn thông Quốc tế FPT</b></p>
                <p><b>Địa chỉ:</b> Toà nhà FPT, Lô 2, đường Phạm Hùng, quận Cầu Giấy, Hà Nội.
                    <br><b>Hotline:</b> <a href="tel:1900 6973">1900 6973</a>
                </p>
            </li>
            <li data-map-lat="10.2488325" data-map-lng="106.374615">
                <p class="bold"><b>bến tre Viễn thông Quốc tế FPT</b></p>
                <p><b>Địa chỉ:</b> Đồng Khởi, Bến Tre.
                    <br><b>Hotline:</b> <a href="tel:1900 6973">1900 6973</a>
                </p>
            </li>
            
        </ul>
        </div>
        <div id="contractMap"></div>
    </section>
</main>


<!-- script -->

<!-- plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvznRxmwBoEWA2xeJHFwLVG0WbwoS7jkg"></script>
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYd0KDmTuDnaSM8r9g7p5bna5b5zTzBXg"></script> -->
    <script>
        
        $('.maps').click(function () {
            $('.maps iframe').css("pointer-events", "auto");
        });

        $( ".maps" ).mouseleave(function() {
            $('.maps iframe').css("pointer-events", "none");
        });


        (function ($) {
            $(window).on("load", function () {
                $("#listMapID").mCustomScrollbar({
                    theme: "my-theme",
                    autoHideScrollbar: false
                });
            });
        })(jQuery);

        function initMap() {
            var eMap = document.getElementById('listMapID');
            var centerLatLng = {lat: Number(eMap.getAttribute('data-map-lat')), lng: Number(eMap.getAttribute('data-map-lng'))};
            var map = new google.maps.Map(document.getElementById('contractMap'), {
                zoom: 17,
                center: centerLatLng,
                scrollwheel: false
            });
            $('#listMapID li').each(function (index) {
                var position = {lat: Number($(this).attr('data-map-lat')), lng: Number($(this).attr('data-map-lng'))};
                var title = $(this).find('.name').html();
                var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: title
                });
            });
            $('#listMapID li').on('click', function () {
                var latLng = {lat: Number($(this).attr('data-map-lat')), lng: Number($(this).attr('data-map-lng'))};
                map.panTo(latLng);
            });

        }
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/httpdoan/change-map-gg-mpgyzX */
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.maps iframe{
            pointer-events: none;
        }
        #contractMap{height: 600px}

      .wrap-map {
          position: relative;
      }
      .wrap-map .address-list {
          /*width: 400px;*/
          position: absolute;
          top: 40px;
          right: 40px;
          z-index: 2;
      }
      #listMapID {
          /*float: right;*/
          height: auto;
          width: 100%;
          max-width: 400px;
          background: rgba(255,255,255,.95);
          list-style: none;
          padding: 0 15px;
          display: inline-block;
      }
      #listMapID li {
          cursor: pointer;
          float: left;
          width: 100%;
          padding: 0px 0 10px 0;
          border-bottom: 1px #ddd solid;
          list-style: none;
          margin-top: 15px;
      }
      #listMapID li:hover {_background: #b5d6ff}
      #listMapID li:nth-last-child(1){margin-bottom: 5px; border-bottom: 0px;}
      #listMapID li p {
          margin: 5px 0;
      }
      #listMapID a {
          color: #000;
      }

Comments