Home/ Questions/Q 7047573
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:47:16+00:00

I am trying to display a Google map when a user searches for a

  • 0

I am trying to display a Google map when a user searches for a city and presses the search button, but I do not understand how to do it properly. Here is my code done so far. I don’t get how to take user input and check that city is in the array. If it is in the array then it should display it on the Google map. For example, if the user types the city name Houston, USA then it should display on the Google map after checking whether the city name is in our database.

Script:

function searchResult(cityname) { 
    var namesOfCity = ["houston,boston,newyork,florida"];

    //check the user input 

    //if match display it on google map    
}

function initialize() 
{
        if(GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
            map.setUIToDefault();
        }
    }

HTML

<body onload="initialize()" onunload="GUnload()">


 <input type="text" id="cityname" value="" name=""/>
  <input id="search" type="button" value="Search" onclick="searchResult('cityname')" />
  <div id="map" style="width: 100%; height: 450px; position: relative; background-color: rgb(229, 227, 223);"></div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are close, but you are not initialising your array correctly.

    You are also not storing the correct coordinates for each city in your array.

    Instead, try using a custom object to store the names of allowed cities and their coordinates (latitude and longitude) and looking at that to determine what to display:

    function searchResult(cityname) { 
    var cities = {
        houston: { 
           lat: /* ... */,
           long: /* ... */
        },
        boston: { 
           lat: /* ... */,
           long: /* ... */
        },
        'new york': { // note the quotes due to a space in the name
           lat: /* ... */,
           long: /* ... */
        },
        florida: { 
           lat: /* ... */,
           long: /* ... */
        }
    };

    //check the user input 
    var textfield = document.getElementById(cityname);

    if (textfield) {
        // look up the lowercase version of the value typed in
        var coords = cities[textfield.value.toLowerCase()];
        //if match display it on google map   
        if (coords) {
            var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(coords.lat, coords.long), 13); // you could also make the zoom level a property of each city, which would allow you to customise that per city
            map.setUIToDefault();
        }
    }     
}
    • 0