지도에서 마커를 클릭하여 대화 상자를 엽니 다.

Question

안녕하세요. this과 같은 기능을 원합니다.지도를 만들었지 만 마커 아이콘을 클릭하여 대화 상자를 열 수 있습니까? 당신이 마커에 클릭상의 infowindow을 열고 자처럼

<script type="text/javascript"> 
    initialize(); 
// OnLoad function ... 
function initialize() { 


    var fenway = new google.maps.LatLng(-27,133); 
var mapOptions = { 
    center: fenway, 
    zoom: 4, 

    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 


var fluster = new Fluster2(map); 
    var marker; 
<?php $count=1; 
    foreach($profileinfo as $property){ 
    $lat_val = $property->lat; 
    $long_val = $property->lng; ?> 
    <?php } ?> 


// Initialize Fluster and give it a existing map 
    var fluster = new Fluster2(map); 
    var marker; 
    <?php $count=1; 
    foreach($paginate as $propert){ 
    $lat_val = $propert->lat; 
    $long_val = $propert->lng; 
    $address1 = $propert->address.','.$propert->suburb;?> 
    // Create a new marker. Don't add it to the map! 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(<?php echo $lat_val; ?>, <?php echo $long_val; ?>), 
      title: '<?php echo $address1; ?>' 

     }); 
     fluster.addMarker(marker); 
    <?php 
    }?> 
    // Set styles 
    // These are the same styles as default, assignment is only for demonstration ... 
    fluster.styles = { 
     // This style will be used for clusters with more than 0 markers 
     0: { 
      image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m1.png', 
      textColor: '#FFFFFF', 
      width: 53, 
      height: 52 
     }, 
     // This style will be used for clusters with more than 10 markers 
     10: { 
      image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m2.png', 
      textColor: '#FFFFFF', 
      width: 56, 
      height: 55 
     }, 
     20: { 
      image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png', 
      textColor: '#FFFFFF', 
      width: 66, 
      height: 65 
     } 
    }; 
    fluster.initialize(); 


} 

</script> 

Answer 1

는 소리. 이 예제의 documentation

코드에서 해당 작업을 수행하는 방법의 Here is the example : 여기

// This example displays a marker at the center of Australia. 
 
// When the user clicks the marker, an info window opens. 
 

 
function initialize() { 
 
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922); 
 
    var mapOptions = { 
 
    zoom: 4, 
 
    center: myLatlng 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
 
    'sandstone rock formation in the southern part of the ' + 
 
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' + 
 
    'south west of the nearest large town, Alice Springs; 450&#160;km ' + 
 
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' + 
 
    'features of the Uluru - Kata Tjuta National Park. Uluru is ' + 
 
    'sacred to the Pitjantjatjara and Yankunytjatjara, the ' + 
 
    'Aboriginal people of the area. It has many springs, waterholes, ' + 
 
    'rock caves and ancient paintings. Uluru is listed as a World ' + 
 
    'Heritage Site.</p>' + 
 
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + 
 
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' + 
 
    '(last visited June 22, 2009).</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    map: map, 
 
    title: 'Uluru (Ayers Rock)' 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 
} 
 

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

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<div id="map-canvas"></div>

Answer 2

코드

// **********************************************Sample Code********************************************** 
    var markerSample = new google.maps.Marker({ 
    position: new google.maps.LatLng(LAT, LNG), 
      map: panorama// your map 
     }); 

    google.maps.event.addListener(markerSample, 'click', function() { 
    var dialogMine = $("#mySampleDialogBox").dialog();// 
    $(dialogMine).siblings('.ui-dialog-titlebar').remove();//for manual close 
    $(dialogMine).dialog({ resizable: false });// resizable 
    //$("#mySampleDialogBox").dialog(); 
    }); 

입니다