1

I m using google map api to get lat long on click event.I'm able to get lat long on click but when i tries to click the place which already exist or already having marked on that place it doesn't allow me to click on that place or on that text or icon near text. attaching image .enter image description here

this is the code to get lat long

google.maps.event.addListener(map, "click", function (e) {
    removeMarkers(null);
    var latLng = e.latLng;
    var lat1 = e.latLng.lat();
    var lng1 = e.latLng.lng();
    updateLatLongBoxes(lat1, lng1);
    // Place marker on clicked Position
    var marker = new google.maps.Marker({
        position: latLng
    });
    marker.setMap(map);
    //Store the current marker in an array
    markers.push(marker);

    });
mintra
  • 337
  • 1
  • 3
  • 19
  • possible duplicate of [Google Maps API Click Point Marker (not custom)](http://stackoverflow.com/questions/13466805/google-maps-api-click-point-marker-not-custom) – geocodezip Oct 15 '15 at 12:04
  • possible duplicate of [I am not able to place markers on the places which is already marked by google with other symbols](http://stackoverflow.com/questions/28186720/i-am-not-able-to-place-markers-on-the-places-which-is-already-marked-by-google-w) – geocodezip Oct 15 '15 at 12:05

1 Answers1

1

Google Maps triggers its own click handler for POI objects and there is no official way to register custom event.

Probably the preferable approach here would be to hide POI features via styles as shown below

function initMap() {
    var latlng = new google.maps.LatLng(40.713638, -74.005529);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            featureType: "poi",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }]
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, "click", function (event) {
        //console.log(event.latLng.toString());
        placeMarker(map, event.latLng);
    });


}

function placeMarker(map, location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
}

google.maps.event.addDomListener(window, 'load', initMap);
 #map_canvas {
     height: 600px;
     width: 800px;
 }
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

Another option would be register custom click handler by overriding google.maps.InfoWindow as demonstrated below:

function initMap() {
    var latlng = new google.maps.LatLng(40.713638, -74.005529);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, "click", function (event) {
        //console.log(event.latLng.toString());
        placeMarker(map, event.latLng);
    });



    var fnSetContent = google.maps.InfoWindow.prototype.setContent;
    google.maps.InfoWindow.prototype.setContent = function () {
        google.maps.event.addListenerOnce(this, 'map_changed', function () {
            var map = this.getMap();
            google.maps.event.trigger(map, 'click', { latLng: this.getPosition() });
            this.close(); //force to close Info Window
        });
        fnSetContent.apply(this, arguments);
    };
}

function placeMarker(map, location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initMap);
 #map_canvas {
            height: 600px;
            width: 800px;
        }
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193