如何为标签放置信息窗口

时间:2017-04-09 10:15:04

标签: google-maps infowindow

我的当前代码显示地址图标。我尝试过悬停和弹出窗口 一个小盒子。而现在我想点击其他周围 然后该图标会显示一个标签以供简短描述。如何在代码中实现这一点。 希望任何人都能在这里帮助我。

<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map-canvas'),{
        center:{
        lat:10.2969,
        lng:123.8887
        },
        zoom:15
    });
    var image = 'http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png';
    var beachMarker = new google.maps.Marker({
        position: {
       lat:10.2969,
       lng:123.8887
      },
      map: map,
      icon: image,
      title: 'Scholar',
      draggable: false
  });
    var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
    google.maps.event.addListener(searchBox,'places_changed', function(){
        var places = searchBox.getPlaces();
        var bounds = new google.maps.LatLngBounds();
        var i, place;
        for(i=0; place=places[i];i++){
            bounds.extend(place.geometry.location);
        marker.setPosition(place.geometry.location); //set marker location new.......
    }
    map.fitBounds(bounds);
    map.setZoom(15);
});
    google.maps.event.addListener(marker,'position_changed',function(){

        var lat = marker.getPosition().lat();
        var lng = marker.getPosition().lng();

        $('#lat').val(lat);
        $('#lng').val(lng);
    });
</script>

1 个答案:

答案 0 :(得分:1)

您可以使用infoWindow并单击listerner

    var yourString = 'your string .....';

    var your_infowindow = new google.maps.InfoWindow({
        content: yourString
    });

    var image = 'http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png';
    var beachMarker = new google.maps.Marker({
        position: {
          lat:{!! $orga->userinfo->lat !!},
          lng:{!! $orga->userinfo->lng !!}
      },
      map: map,
      icon: image,
      title: 'Scholar',
      draggable: false
  });

    beachMarker.addListener('click', function() {
      your_infowindow.open(map, beachMarker);
    });