CODEWITHSUNDEEP
javascripthtmlgoogle-maps
hari86
hari86

Reputation: 669

how to load map on click of the button

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.

Upvotes: 0

Views: 7529

Answers (2)

Reinder Wit
Reinder Wit

Reputation: 6615

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>

Upvotes: 1

nebulousGirl
nebulousGirl

Reputation: 1364

Your loadMap function isn't doing anything right now. You need to place a marker on the map at the LatLng you create in the loadMap function.

function loadmap(lat,lng) {
    //alert("lat,lang");
    var point = new google.maps.LatLng('12.9833','77.5833');
    placeMarker(point);
    document.getElementById("menu").disabled=true;
}

Upvotes: 0

Related Questions