0

I am trying to create a text field in HTML and when you submit it I would like to run a Javascript function that transfers the text field (a county or city name) into coordinates and mark those coordinates on the map. My issue is, every time the form is submitted the map loads the SAME coordinates I started with. It will go through all of the functions and even prints out alerts with the new coordinates (so there is nothing wrong with the geocode code) but never puts down any new markers. I cannot get markers to show unless I hardcode them. This is what I have so far:

I would really appreciate if someone could give me some advice on how to resolve this issue. Thanks!

    <script>
        // create the global map, count, geocoder and marker objects.
        var map;
        var count = 0;
        var geocoder = new google.maps.Geocoder();
        var markers = []; // Create a marker array to hold your markers

        function setMarkers(locations) {
            //locations = localStorage.getItem('places');
            alert(locations + "   _SETTTT");
            for (var i = 0; i < locations.length; i++) {
                var place = locations[i];
                var myLatLng = new google.maps.LatLng(place[1], place[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title: place[0],
                    zIndex: place[3]
                });
                //window.alert(places + " WE ARE IN SETM");
                // Push marker to markers array
                markers.push(marker);
            }
        }

        function reloadMarkers() {
            // Reload the places.
            //places = localStorage.getItem('places');

            alert(places + "   _RELOAD.");
            // Loop through markers and set map to null for each
            for (var i=0; i<markers.length; i++) {

                markers[i].setMap(null);
            }

            // Reset the markers array
            markers = [];

            // Call set markers to re-add markers
            setMarkers(places);
        }

        function addGeoMarkerCount() {
            var newPlace;
            var lat, lon;
            var address = document.getElementById('County').value + ", NJ";
            geocoder = new google.maps.Geocoder();

            window.alert(address);

            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
              {
                count++;
                lat = results[0].geometry.location.lat();
                lon = results[0].geometry.location.lng();
                newPlace = [address, lat, lon, count];

                places.push(newPlace);
                localStorage.setItem('places', places);
                window.alert(places);

                reloadMarkers();
              }
            });

            window.alert("TEST");
        }

        function addGeoMarkerCit(){
            var newPlace;
            var lat, lon;
            var address = document.getElementById('City').value + ", NJ";
            geocoder = new google.maps.Geocoder()

            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
              {
                count++;
                lat = results[0].geometry.location.lat();
                lon = results[0].geometry.location.lng();
                newPlace = [address, lat, lon, count];

                places.push(newPlace);
              }
            });

            reloadMarkers();
        }

        function initialize() {

            // Creates the map options
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(40.0583, -74.4057),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }

            // Create the initial map
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // Bind event listener on button to reload markers
            document.getElementById('Search').addEventListener('click', reloadMarkers);
            document.getElementById('CountyName').addEventListener('submit', addGeoMarkerCount);
            document.getElementById('CityName').addEventListener('submit', addGeoMarkerCit);
            reloadMarkers();
        }

        initialize();
    </script>
nick
  • 3
  • 2
  • 1
    You're almost there, just JSON.stringify and JSON.parse before/after localStorage as per https://stackoverflow.com/questions/3357553/how-do-i-store-an-array-in-localstorage – Jamby Nov 24 '17 at 21:20
  • HOLY SHIT! You are the man, honestly. Thank you so much! I've been trying and searching everything forever. :) – nick Nov 24 '17 at 21:30

0 Answers0