JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<div id="map_canvas" style="width: 500px; height: 400px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDm0B3oS_ET7AoPSk1mXejnoQL5DAl5kc4" type="text/javascript"></script>

JavaScript

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  $.getJSON('https://api.myjson.com/bins/uvef2', function(data) {
    $.each(data.points, function(i, value) {

      var myLatlng = new google.maps.LatLng(value.lat, value.lon);
      alert(myLatlng);
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "text " + value.lon
      });

    });
  });


}