javascript - How to get Google Maps onclick to get location name?

Anyone please help to achieve to get location name while click google map.

E.g: If i am going to click on US states like "Texas or Alabama" location marker then need to get exact values while onclick.

If there is any other way to get the location name. If it's possbile then please share you experiece. Awaiting your replay.

Below is my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Copy of USA Nevada state - City Level data - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 500px;
}
</style>

<script type="text/javascript" src=";amp;v=3"></script>

<script type="text/javascript">
    //Fusion Table URL : #map:id=3
    function initialize() {
        google.maps.visualRefresh = true;
        var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
        if (isMobile) {
            var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
        }
        var mapDiv = document.getElementById('googft-mapCanvas');
        mapDiv.style.width = isMobile ? '100%' : '900px';
        mapDiv.style.height = isMobile ? '100%' : '900px';
        var map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(32.48632729547162, -108.729549109375),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

        layer = new google.maps.FusionTablesLayer({
            map: map,
            heatmap: { enabled: false },
            query: {
                select: "col3",
                from: "1vKMjmiVb3eHCEnQ6j5HpIYGZ3Gttth8ac317nxNg",
                where: ""
            },
            options: {
                styleId: 3,
                templateId: 4
            }
        });

        google.maps.event.addlistener(layer, 'click', function () {            
            var selectedPlaceName = event.latlng.place.name;
        });

        if (isMobile) {
            var legend = document.getElementById('googft-legend');
            var legendOpenButton = document.getElementById('googft-legend-open');
            var legendCloseButton = document.getElementById('googft-legend-close');
            legend.style.display = 'none';
            legendOpenButton.style.display = 'block';
            legendCloseButton.style.display = 'block';
            legendOpenButton.onclick = function () {
                legend.style.display = 'block';
                legendOpenButton.style.display = 'none';
            }
            legendCloseButton.onclick = function () {
                legend.style.display = 'none';
                legendOpenButton.style.display = 'block';
            }
        }
    }

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

<body>
  <div id="googft-mapCanvas"></div>

  <div class='googft-info-window'>
<b>name:</b> {name}<br>
<b>id:</b> {id}<br>
<b>geometry:</b> {geometry}
</div>
</body>
</html>

Anyone please help to achieve to get location name while click google map.

E.g: If i am going to click on US states like "Texas or Alabama" location marker then need to get exact values while onclick.

If there is any other way to get the location name. If it's possbile then please share you experiece. Awaiting your replay.

Below is my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Copy of USA Nevada state - City Level data - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 500px;
}
</style>

<script type="text/javascript" src="https://maps.google./maps/api/js?sensor=false&amp;v=3"></script>

<script type="text/javascript">
    //Fusion Table URL : https://www.google./fusiontables/data?docid=1vKMjmiVb3eHCEnQ6j5HpIYGZ3Gttth8ac317nxNg#map:id=3
    function initialize() {
        google.maps.visualRefresh = true;
        var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
        if (isMobile) {
            var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
        }
        var mapDiv = document.getElementById('googft-mapCanvas');
        mapDiv.style.width = isMobile ? '100%' : '900px';
        mapDiv.style.height = isMobile ? '100%' : '900px';
        var map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(32.48632729547162, -108.729549109375),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

        layer = new google.maps.FusionTablesLayer({
            map: map,
            heatmap: { enabled: false },
            query: {
                select: "col3",
                from: "1vKMjmiVb3eHCEnQ6j5HpIYGZ3Gttth8ac317nxNg",
                where: ""
            },
            options: {
                styleId: 3,
                templateId: 4
            }
        });

        google.maps.event.addlistener(layer, 'click', function () {            
            var selectedPlaceName = event.latlng.place.name;
        });

        if (isMobile) {
            var legend = document.getElementById('googft-legend');
            var legendOpenButton = document.getElementById('googft-legend-open');
            var legendCloseButton = document.getElementById('googft-legend-close');
            legend.style.display = 'none';
            legendOpenButton.style.display = 'block';
            legendCloseButton.style.display = 'block';
            legendOpenButton.onclick = function () {
                legend.style.display = 'block';
                legendOpenButton.style.display = 'none';
            }
            legendCloseButton.onclick = function () {
                legend.style.display = 'none';
                legendOpenButton.style.display = 'block';
            }
        }
    }

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

<body>
  <div id="googft-mapCanvas"></div>

  <div class='googft-info-window'>
<b>name:</b> {name}<br>
<b>id:</b> {id}<br>
<b>geometry:</b> {geometry}
</div>
</body>
</html>

Share Improve this question asked May 6, 2015 at 8:37 Dhamodaran M 1234 silver badges8 bronze badges

I have check your code and its working fine on click its give details like name: Reno id: NV-city geometry: Reno – Jaimin Soni Commented May 6, 2015 at 8:49

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

Use: place.name

Here is the code that provide the location name onclick event.

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-33.8665433, 151.1956316),
    zoom: 15
  });

  var request = {
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
  };

  var infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);

  service.getDetails(request, function(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);// Here you can set your place name
        infowindow.open(map, this);
      });
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

For More details follow this link: Google Map Place Details

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745339272a4623249.html

javascript - How to get Google Maps onclick to get location name? - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to get Google Maps onclick to get location name? - Stack Overflow

1 Answer 1

相关推荐