how to load map on click of the button

Question

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.

please show the complete HTML, because you need more than just the code above to be able to use Google Maps — Reinder Wit, Sep 27 '12 at 12:18
check https://developers.google.com/maps/documentation/javascript/tutorial?hl=nl#HelloWorld for the 'Hello World' sample — Reinder Wit, Sep 27 '12 at 12:19
the loadmap function has wrong staement..need some idea how to implement that function . — hari86, Sep 27 '12 at 12:25

Reinder Wit · Accepted Answer · 2012-09-28T08:02:18.127

1

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>

edited Sep 28 '12 at 08:02

answered Sep 27 '12 at 12:44

Reinder Wit

6,490
1
25
36

do you have a javascript console open? anything bad going on? – Reinder Wit Sep 27 '12 at 13:09
hey your loadMap is working but the now intilize() method is not working..plzz help – hari86 Sep 27 '12 at 13:23
yes thankyou..mine also working with ur code ..but now the intialize() method is not working – hari86 Sep 27 '12 at 13:27
could you plz help me out with why my placemarker fun is not wrking – hari86 Sep 27 '12 at 13:48
that's because the deleteOverlays() function has some issues (http://stackoverflow.com/questions/4137308/google-maps-v3-setmap-undefined-when-trying-to-clear-all-markers) please check out my updated fiddle: http://jsfiddle.net/YjaRZ/1/ – Reinder Wit Sep 27 '12 at 14:03
I've updated my code above and added the modified deleteOverlays() function – Reinder Wit Sep 27 '12 at 14:06
hi i checked your updated code..but still itz not creating any marker when clicked on the map..can u check it plz..thankyou – hari86 Sep 27 '12 at 14:10
use the code from my Fiddle ;) the code above was missing Google's javascripts, I've added it and it's now the same as this fiddle: http://jsfiddle.net/YjaRZ/2/ which works – Reinder Wit Sep 27 '12 at 14:24
hey in both of you jsfiddle code..the markers are not placing when i click on the map..only when i click city is working ...am i doing something wrong – hari86 Sep 28 '12 at 05:59
it's not really clear to me what you're trying to achieve, but I've added a click event to the map so that it always returns to the same location: http://jsfiddle.net/YjaRZ/3/ – Reinder Wit Sep 28 '12 at 06:12
ok my goal is when i click the cities that particula map should diaplay and secondly when i click on the map i should place the marker and shoud get the coordinates.... – hari86 Sep 28 '12 at 06:58
i dont wana retuen to map home..when iam in michigan map ill click on the map and should get that lat lng where i clicked.. – hari86 Sep 28 '12 at 07:01
then it's just a matter of moving the code for showing the marker to a separate function and registering the click on the map using google.maps.event.addListener. Check out this new version: http://jsfiddle.net/YjaRZ/4/ – Reinder Wit Sep 28 '12 at 07:08
sorru to bother you..but what iam looking is the following functionality along with maps when i clicked on particular city link plz chek it http://jsfiddle.net/veldurtyharesh/sT79a/ – hari86 Sep 28 '12 at 07:16
iam using the above code but when iam integrating with the city link click ..city link click is not working – hari86 Sep 28 '12 at 07:22
I've updated the fiddle, now it's also showing the latitude and longitude: http://jsfiddle.net/YjaRZ/6/ – Reinder Wit Sep 28 '12 at 07:22
your code gives coordinates when i click thw city ..but my goal is after going to city map when i click anywhere on the city map i should get the coordinates – hari86 Sep 28 '12 at 07:25
I've also updated your fiddle: http://jsfiddle.net/sT79a/1/ it didnt work because the deleteOverlays function was throwing an error (check http://stackoverflow.com/questions/4137308/google-maps-v3-setmap-undefined-when-trying-to-clear-all-markers) – Reinder Wit Sep 28 '12 at 07:27
yeahh with your fiddle : http://jsfiddle.net/sT79a/1/ ..here now i wanna add cities in side bar to your fiddle and when i click city link map should go to that particular city and show the coordinates... – hari86 Sep 28 '12 at 07:32
your requirements are very confusing... what happened to clicking on the map and showing the marker? – Reinder Wit Sep 28 '12 at 07:38
iam sorry..let me explain..as the program runs the defual location map will open, then ill click a city the map should go to that city and here i will click anywhere in the map i should get the coordinates....the problem with this fiddle :http://jsfiddle.net/YjaRZ/6/ is after going to city, only one click with coordinates is working... – hari86 Sep 28 '12 at 07:45
OK (again, it's just a matter of moving the code around, all the logic is already present). I've update my fiddle (and my answer above): http://jsfiddle.net/YjaRZ/8/ – Reinder Wit Sep 28 '12 at 07:52
yeah thank you ..this is what iam looking for..but see when ever iam click the city it should show the coordinates..but here its happening only when i click on the map... – hari86 Sep 28 '12 at 07:59
this version also shows coordinates when clicking the city links: http://jsfiddle.net/YjaRZ/9/ – Reinder Wit Sep 28 '12 at 08:01
you are awesome..thanks alot..from this posting i have leared a lot avbout google maps js api..and js tooo.. – hari86 Sep 28 '12 at 08:09
hi..onemore thing..intitially when the first time i run iam not getting coordinates of the defautt location and i need markers with center when i click the city links (not the marker when i click anywhere on the map) – hari86 Sep 28 '12 at 09:16
hi thankyou..sorry to bother u again..actually iam what iam trying to implement now is the initial marker when city clicked should stay like that ..and when i click on another area of map the maker should give coordinates with my custom icon..is this possible – hari86 Sep 28 '12 at 10:00
this version has a custom marker image, which is only shown when clicking the map: http://jsfiddle.net/YjaRZ/12/ – Reinder Wit Sep 28 '12 at 10:21
one more issue i found...the latitude and logitude are giving long numbers..i used parseFloat but its not working document.getElementById("lat").innerHTML = parseFloat(location.lat()); document.getElementById("lng").innerHTML = parseFloat(location.lng()); how to make it short – hari86 Sep 28 '12 at 10:25
you can use javascript function .toFixed(decimals): parseFloat(location.lng()).toFixed(4) – Reinder Wit Sep 28 '12 at 11:16
hi..Any clue for the below post: http://stackoverflow.com/questions/12707219/loading-googlemaps-on-page-load – hari86 Oct 03 '12 at 11:07
Hi..Any idea for this post : http://stackoverflow.com/questions/12721287/settimeout-to-avoid-over-query-limit thankyou – hari86 Oct 04 '12 at 06:31

score 0 · Answer 2 · answered Sep 27 '12 at 12:35

0

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;
}

answered Sep 27 '12 at 12:35

nebulousGirl

1,364
2
13
23

yeahh i have put a marker but when the dataobject is clciked the map is not loading – hari86 Sep 27 '12 at 12:39
When do you call `initialize()`? and where is the `map_canvas` element ? Do you have a JavaScript error? – nebulousGirl Sep 27 '12 at 12:45
i have the initialize..no error..the code in the onload function is not working..it has to take the lat lng from onclick and the function should run..not able to think about how exactly to implement it – hari86 Sep 27 '12 at 12:55

how to load map on click of the button

2 Answers2