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>