JavaScript World Map Select Country

This JavaScript code snippet helps you to create a country-select world map. It initializes a Google map on a webpage and places a marker on it. It does so by getting the latitude and longitude data of a list item (LI) that is clicked. The latitude and longitude data are retrieved using the dataset property of the clicked LI element.

The function initialize() creates a map with the center at the given latitude and longitude. The marker is placed at the same location, and when a different LI element is clicked, the map is updated to show the new location.

How to Create JavaScript World Map Select Country

First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

Create the HTML structure for the world map as follows:

<div class="container-fluid">
  <div class="row">
    <div class="leftArea col-md-4" style="background-color:#fff5aa;">
      <div class="positions">
        <h2 class="display-5">請選擇地點:</h2>
        <ul class="list-group">
          <li class="list-group-item" data-lat="23.69781" data-lng="120.960515">臺灣 Taiwan</li>
          <li class="list-group-item" data-lat="36.204824" data-lng="138.252924">日本 Japan</li>
          <li class="list-group-item" data-lat="1.352083" data-lng="103.819836">新加坡 Singapore</li>
          <li class="list-group-item" data-lat="56.130366" data-lng="-106.346771">加拿大 Canada</li>
          <li class="list-group-item" data-lat="47.516231" data-lng="14.550072">奧地利 Austria</li>
        </ul>
      </div>
    </div>
    <div class="rightArea col-md-8">
      <div class="container">
        <div id="google-map"></div>
      </div>
    </div>
  </div>
</div>

Now, style the world map using the following CSS styles:

@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

@import url('https://fonts.googleapis.com/css?family=cwTeXHei|Delius|Itim');

html, body {height: 100%; margin: 0; padding: 0; font-family:'cwTeXHei'}

h2 {margin:10px 0}
.leftArea {padding:0 15px 10px}
.rightArea {padding:0}
.container {max-width: 100vw; height: 100vh; margin: 0; padding: 0; float: left; display: inline-block}


#google-map {padding:0; height:100%}

Load the following scripts before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCunOitL3jnP-rGqbTgPYdQTJl6_yLRwng'></script>

Finally, add the following JavaScript function for its functionality:

var eq = 0;
var positionLI = document.querySelector(".positions ul");
var lat = positionLI.children[eq].dataset.lat;
var lng = positionLI.children[eq].dataset.lng;

initialize(lat,lng);

//var lat = positionLI[eq].data("lat");
//alert(positionLI.children[eq].getAttribute("data-lat"));
function initialize(lat,lng) {
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("google-map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}

var countryLI = positionLI.children;
for(i=0;i<=positionLI.childElementCount-1;i++){
  positionLI.children[i].addEventListener("click",function(){
    lat = this.dataset.lat;
    lng = this.dataset.lng;
    initialize(lat,lng);
  });
}

That’s all! hopefully, you have successfully created JavaScript world map select country. If you have any questions or suggestions, feel free to comment below.