googleMap JavaScript V3

Question

When I use the above code on v2 it is working, but when I use it in V3 map, I cannot track the location; latitude and longitude are not even returned.

Can anyone tell me why it is happening?

 function load() 
 {
      if (GBrowserIsCompatible())
      {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(48.89364,2.33739);
        map.setCenter(center, 15);
        geocoder = new GClientGeocoder();
        var marker = new GMarker(center);  
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
        document.getElementById("lng").innerHTML = center.lng().toFixed(5);
        }
    }

       function showAddress(address)
       {
       var map = new GMap2(document.getElementById("map"));
       map.addControl(new GSmallMapControl());
       map.addControl(new GMapTypeControl());
       if (geocoder) 
       {
        geocoder.getLatLng(address,function(point) 
                                     {
                                      if (!point)
                                      {
                                            alert(address + " not found");
                                      } 
                                    else 
                                    {
                                    document.getElementById("lat").innerHTML = point.lat().toFixed(5);
                                    document.getElementById("lng").innerHTML = point.lng().toFixed(5);
                                    map.clearOverlays()
                                    map.setCenter(point, 14);
                                    var marker = new GMarker(point);  
                                     map.addOverlay(marker);
                                    }
                                    }
                           );
      }
    }
    </script>

score 3 · Accepted Answer · answered Nov 18 '11 at 04:50

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Gecoding</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true&v=3&libraries=geometry">
</script>
<script type="text/javascript">
var geocoder;
  var map;
  function initialize()
  {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(17.447246,78.362029);
     var myOptions =
         {
             zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
        map = new google.maps.Map(document.getElementById("map"), myOptions);
              var marker=new google.maps.Marker({
                position: latlng,
                 map: map
              });
                  marker.setMap(map);

        document.getElementById("lat").innerHtml=latlng.lat.toFixed(5);
        document.getElementById("lng").innerHTML=latlng.lng.toFixed(5);

}
  function getAddress()
    {
    var address = document.getElementById("address").value;

    var latlng;
    geocoder.geocode({'address': address},function(results, status)
    {

      if (status == google.maps.GeocoderStatus.OK)
      {
        latlng = results[0].geometry.location;
        document.getElementById("lat").innerHTML= latlng.lat();
        document.getElementById("lng").innerHTML= latlng.lng();
        map.setCenter(results[0].geometry.location);
        marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        marker.setMap(Map);



     }
      else {
        alert("Geocode was not successful for the following reason: " + status);
      }

    });


  }
  </script>
  </script>
<body onload="initialize();">
 <form onsubmit="getAddress();return false;" method="post">
       <input id="address" type="text" size="60" name="address"/>
       <input type="submit" value="Search!" /><br /><br />
        Latitude:  <span id="lat"></span> <br /><br />
        Longitude: <span id="lng"></span>
</form>
<table>
<tr><td><span></span></td></tr>
<tr><td><span></span></td></tr>
</table>
<div align="center" id="map" style="width: 100%;top: 5%; height: 95%"><br/></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

Try with new google.maps.map instead of new GMap2

EDIT:

To remove the markers with api-3 you have to do

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

Solution extracted from this question

edited May 23 '17 at 11:55

Community

1
1

answered Nov 17 '11 at 14:27

SERPRO

10,015
8
46
63

hi thank u , i used new google.maps.map, but the problem is my previous request markers r displaying for every request,what to do do, to clear markers, for every new request – Nov 18 '11 at 04:48

googleMap JavaScript V3

2 Answers2