JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><div id="map_canvas"></div>

CSS

html, body, #map_canvas { margin: 0; padding: 0; height: 100% }

JavaScript

var geocoder;
var map;
var markersArray = [];

//plot initial point using geocode instead of coordinates (works just fine)
  function initialize() {
    geocoder = new google.maps.Geocoder();
     latlang = geocoder.geocode( { 'address': 'New York City'}, function(results, status) { //use latlang to enter city instead of coordinates 
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
                });
            markersArray.push(marker);

            }
            else{
            alert("Geocode was not successful for the following reason: " + status);
            }
        });
    var myOptions = {
        center: latlang, zoom: 5, mapTypeId: google.maps.MapTypeId.SATELLITE,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
     map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
     plotMarkers();
  }

///////////////////////////////////////////////////////////
//Everything below this line is for attempting to plot the markers

  var locationsArray = ['Pittsburgh','Chicago', 'Atlanta'];

  function plotMarkers(){
for(var i = 0; i < locationsArray.length; i++){

  codeAddresses(locationsArray[i]);

}
  }

  function codeAddresses(address){
    geocoder.geocode( { 'address': address}, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
                });
            //markersArray.push(marker); 
            }
            else{
            alert("Geocode was not successful for the following reason: " + status);
            }
  });
  }

     ...