Question

USE an API

You have a drop down list of 4 cities. Upon selecting a particular city, longitude, latitude and marker of the location is shown on Google Maps.

Answer 1

Here is a small example of using Google Maps API for the same:

we are storing the coordinates by the city key. When the selection is made in the dropdown list, we are taking the value, fetching the coordinates and calling the method setCenter.

var map;
function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {  
    center: new google.maps.LatLng(40.685646, -76.195499), 
    zoom: 10 
  };
  map = new google.maps.Map(mapCanvas, mapOptions);
}

myMap();

var cord = {
  'NDL': '28.644800, 77.216721',
  'NYC': '40.875597,-77.776226',
  'PAR': '48.864716, 2.349014'
};

function changeMap(city) {
  var c = cord[city].split(',');
  map.setCenter(new google.maps.LatLng(c[0], c[1]));
}
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div>
  <h2>Please Choose a City</h2>
</div>
<form>
  <fieldset>
    <label>
      Cities
    </label>
    <select id="myCity" name="myCity" onchange="changeMap(this.value)">
      <option value="None">Select a City</option>
      <option value="NDL">New Delhi, IN</option>
      <option value="NYC">New York, PA</option>
      <option value="PAR">Paris, FR</option>
    </select>
  </fieldset>
</form>
<div id="map"></div>
#map {
  height: 200px;
}