Google map

by Alvin Olavarrieta

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<a href="#" class="click">click</a>
<div id="map" style="width: 250px; height: 375px;"></div>

CSS

body {
  padding: 60px;
}

JavaScript

var data = [{
  "city": "Orlando, FL",
  "lat": "28.538335",
  "lon": "-81.379236"
}, {
  "city": "Miami, FL",
  "lat": "25.761680",
  "lon": "-80.191790"
}];

var map;

function initialize() {
  var latlng = new google.maps.LatLng(28.538335, -81.379236);
  var options = {
    zoom: 6,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map($('#map')[0], options);

  $('.click').click(function(e) {
    e.preventDefault();

    // Place markers on map
    for (i = 0; i < data.length; i++) {
      var item = data[i];
      var latLng = new google.maps.LatLng(item.lat, item.lon);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }

  });
}

initialize();