Home/ Questions/Q 8596775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:45:36+00:00

trying to implement the following but its not working <script> function loadmap(lat,lng) { //alert(lat,lang);

  • 0

trying to implement the following but its not working

<script>
     function loadmap(lat,lng)
                {
                //alert("lat,lang");
                var point = new google.maps.LatLng('12.9833','77.5833');
                document.getElementById("menu").disabled=true;
              }
    </script>
<body>
<div id="container">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">World Traveler</h1></div>

<div id="menu" style="background-color:#FFD700;height:800px;width:100px;float:left;">
<table border="0">
<tr>
<th>Cities</th>
</tr>
<tr>
<td onclick="loadMap('40.44','83.43');">newyork</td>
</tr>
<tr>
<td onclick="loadMap('42.3295','-83.1908');">Michigan</td>
</tr>
script type="text/javascript">
        var map;
        var markersArray = [];

        function initialize()
        {
            var latlng = new google.maps.LatLng(12.9833, 77.5833);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


            // add a click event handler to the map object
            google.maps.event.addListener(map, "click", function(event)
            {
                // place a marker
                placeMarker(event.latLng);

                // display the lat/lng in your form's lat/lng fields
                document.getElementById("latFld").value = event.latLng.lat();
                document.getElementById("lngFld").value = event.latLng.lng();
            });
        }
        function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location,
                icon: "http://localhost:8080/HTML5/pin_blue.png",
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            //map.setCenter(location);
        }

        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }
    </script>

when ever the user clicks the menu that particular map with marker should be displayed .iam implementing this in js…Anyhelp would be appriciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    check your javascript debug console.
    I think it’s because your call in the <td> is to 'loadMap()' but the function is called loadmap(). Javascript is case sensitive.

    But you will still have to update your loadmap function because it is not doing anything at the moment.
    Something like this:

        <table border="0">
         <tr>
            <th>Cities</th>
         </tr>
         <tr>
             <td onclick="loadMap('40.44','83.43');">newyork</td>
         </tr>
         <tr>
              <td onclick="loadMap('42.3295','-83.1908');">Michigan</td>
         </tr>
      <table>
    <div id="map_canvas" style="width:400px; height:400px"></div>
          <p>latitude: <span id="lat"></span></p>
          <p>longitude: <span id="lng"></span></p>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      var map;
      var home;
      var markersArray = [];

      function initialize() {
           home = new google.maps.LatLng('12.9833','77.5833');   
           var opts = {
                zoom: 8,
                center: home,
                mapTypeId: google.maps.MapTypeId.ROADMAP
           };

           map = new google.maps.Map(document.getElementById('map_canvas'), opts);
           google.maps.event.addListener(map, "click", function(event) {
                  showMarker(event.latLng);
               });    

      }

      function loadMap(lat,lng)
           {
               var location= new google.maps.LatLng(lat, lng);
               map.setCenter(location);
               document.getElementById("lat").innerHTML = location.lat();
               document.getElementById("lng").innerHTML = location.lng();
           }

        function showMarker(location) {    
               deleteOverlays();               
               var marker = new google.maps.Marker({
                   position: location,
                   map: map
               });
               markersArray.push(marker);
               document.getElementById("lat").innerHTML = location.lat();
               document.getElementById("lng").innerHTML = location.lng();
        }


       function deleteOverlays() {
            if (markersArray) {
                for (i=0; i < markersArray.length; i++) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    • 0