堆栈内存溢出
  简体   繁体   English

通过单击另一个分区的google maps信息窗口上的按钮来更改分区的内容

[英]Changing the content of a division by clicking a button on the google maps infowindow in another division

 原文  2013-06-27 18:35:54  8   1    javascript/ jquery/ html/ google-maps/ web

问题描述

I have a webpage that is divided into multiple divisions.. 我有一个分为多个部分的网页。

one division has a map using google maps api.. and there are markers on the map.. when i click on the marker, an infowindow opens up. 一个分区有一个使用google maps api ..的地图，并且地图上有标记..当我单击标记时，将打开一个信息窗口。

now i am trying to place a button on that infowindow , which on clicked should change the content of another division present in my html page. 现在，我试图在该信息窗口上放置一个按钮，单击该按钮应更改html页面中存在的另一个分区的内容。

i tried it with jquery using something like this 我用这样的东西用jQuery尝试了 

<script>
$("#target").click(function() {
$("#change").html("<img src='floorplans/T2_2.jpg' style='width:100%; height:90%' />");
});
</script>

but this works fine when the button with id as target is present on the web page.. but when i place it on the info window, it doesn't work 但是当以id为目标的按钮出现在网页上时，此方法工作正常。但是当我将其放置在信息窗口中时，它不起作用

my google maps script that displays a button is like this: 我的显示一个按钮的Google Maps脚本是这样的： 

function setContentString(buildingName, buildingID){
    var content=''+buildingName+' <iframe src ="http://x.x.x.x/cgi-bin/perltest.cgi?location='+buildingID+' "width="100%" hieght="100%" frameborder ="0" ></iframe></input><button type="button" id="target">click to change</button>';
return content;
}

can anyone help me out with this please.. 谁能帮我这个忙..

update : 更新：

my webpage code : 我的网页代码： 

<!DOCTYPE html>
<html>
<head>
<title>University of Houston-EMP</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style_emp.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBybWW3YvKrvCK7SggZJwS0NbPE_Kv3aQg&sensor=true">
    </script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>



       <script type="text/javascript">

    <!-- script to load the floor plans-->
    //<script>


<!-- load floorp ends   -->


var map = null;
var mapOptions = null;
var clickIcon = null;
var shadow = null;
var infoWindow;

var building1;
var setBuildings=new Array();
function markerObject(latValue,longValue,buildingName, map){
    this.marker=new google.maps.Marker({
                        position: new google.maps.LatLng(latValue, longValue),
                        map: map,
                        title:buildingName
                        });
}

function createStringLocation(latValue,longValue){
    var stringLocation=latValue.toString()+":"+longValue.toString();
    return stringLocation;
}

function setContentString(buildingName, buildingID){
    var content=''+buildingName+' <iframe src ="http://x.x.x.x/cgi-bin/perltest.cgi?location='+buildingID+' "width="100%" hieght="100%" frameborder ="0" ></iframe></input><button type="button" id="target">click to change</button>';
return content;
}


function buildingObject (buildingName,buildingID,latValue,longValue,areaMap){
    this.buildingID=buildingID;
    this.buildingLat=latValue;
    this.buildingLong=longValue;
    this.buildingName=buildingName;
    this.popupContent=setContentString(this.buildingName, this.buildingID);
    this.infoWindow=new google.maps.InfoWindow({
                            content: this.popupContent,
                        maxWidth: 400
                          });
    this.buildingMarker=new markerObject(this.buildingLat,this.buildingLong,this.buildingName,areaMap);
    this.location=latValue.toString()+":"+longValue.toString();
    this.setBuildingMarker=initBuildingMarker;
    this.map=areaMap;
    this.getName=getBuildingName;
    this.getID=getBuildingID;
    this.setContent=setPopupContent;
    this.getGoogleMarker=getGMarker;
    this.getInfoWindow=getInfoWin;
    this.getBuildingLocation=getLoc;
    this.setBuildingMap=setMap;
    this.createPopup=dataPopup;


}
function initBuildingMarker(){
    var marker=new markerObject();
    marker.setMarker(this.buildingLat,this.buildingLong,this.buildingName);
}

function getBuildingName(){
    return this.buildingName;
}
function getBuildingID(){
    return this.buildingID;
}
function setPopupContent (contentString){
    this.popupContent=contentString;
    this.infoWindow.setContent(this.popupContent);
}
function getGMarker(){
    return this.buildingMarker.marker;
}
function getInfoWin(){
    return this.infoWindow;
}
function getLoc(){
    return this.location;
};
function setMap(){
    var marker=this.getGoogleMarker();
    var infoWindow=this.getInfoWindow();

    var areaMap=this.map;

    google.maps.event.addListener(marker, 'click', function() {infoWindow.open(areaMap, marker);}
                     );

};
function dataPopup(desc){
    this.setContent(desc);
    var marker=this.getGoogleMarker();
    this.infoWindow.open(this.map,marker);

}
function createPopup(desc,infoWin,clickMarker) {
    infoWin.setContent(desc);
    infoWin.open(map,clickMarker);
}





function initialize() {
    var MAPFILES_URL = "http://maps.gstatic.com/intl/en_us/mapfiles/";
    mapOptions = {
        center: new google.maps.LatLng(29.7211, -95.3473),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    clickIcon = new google.maps.MarkerImage(
        MAPFILES_URL + 'dd-start.png',
        new google.maps.Size(20, 34),
            new google.maps.Point(0, 0),
            new google.maps.Point(10, 34)
        );
    shadow = new google.maps.MarkerImage(
        MAPFILES_URL + "shadow50.png",
        new google.maps.Size(37, 34),
            new google.maps.Point(0, 0),
            new google.maps.Point(10,34)
        );

building1=new buildingObject('Class and Business Building','CBB',29.721349, -95.340585,map);
building1.setBuildingMap();
setBuildings.push(building1);

building2=new buildingObject('A.D. Bruce Religion Center','ADB',29.719408, -95.345291,map);
building2.setBuildingMap();
setBuildings.push(building2);

building3=new buildingObject('Agnes Arnold Auditorium','AHA',29.722496, -95.343887,map);
building3.setBuildingMap();
setBuildings.push(building3);

building4=new buildingObject('Agnes Arnold Hall','AH',29.722206, -95.344116,map);
building4.setBuildingMap();
setBuildings.push(building4);

building5=new buildingObject('Alumni Center','ALUM',29.725874, -95.347328,map);
building5.setBuildingMap();
setBuildings.push(building5);

building6=new buildingObject('Athletic Center','ATH2',29.726187, -95.346481,map);
building6.setBuildingMap();
setBuildings.push(building6);

building7=new buildingObject('Athletics Batting Cage','BATC',29.727612, -95.346161,map);
building7.setBuildingMap();
setBuildings.push(building7);

building8=new buildingObject('Athletics Maintenance Building','AMB',29.727509, -95.345764,map);
building8.setBuildingMap();
setBuildings.push(building8);

building9=new buildingObject('Bates Law','BL',29.723936, -95.337906,map);
building9.setBuildingMap();
setBuildings.push(building9);

building10=new buildingObject('Bates Residence Hall','BH',29.718931, -95.346344,map);
building10.setBuildingMap();
setBuildings.push(building10);

building11=new buildingObject('Bayou Oaks Apartments','BOA',29.712778, -95.340736,map);
building11.setBuildingMap();
setBuildings.push(building11);

building12=new buildingObject('Biology Greenhouse','BG',29.721296, -95.344208,map);
building12.setBuildingMap();
setBuildings.push(building12);

building13=new buildingObject('Blaffer Art Museum','FA2',29.724745, -95.342804,map);
building13.setBuildingMap();
setBuildings.push(building13);

building14=new buildingObject('Burdette Keeland Jr. Design & Exploration Center','BKD',29.724739, -95.340546,map);
building14.setBuildingMap();
setBuildings.push(building14);

building15=new buildingObject('Calhoun Lofts Apartments','CLA',29.722198, -95.33857,map);
building15.setBuildingMap();
setBuildings.push(building15);

building16=new buildingObject('Cambridge Oaks Apartments','CO',29.71829, -95.350296,map);
building16.setBuildingMap();
setBuildings.push(building16);

building17=new buildingObject('Campus Recreation & Wellness Center','CRWC',29.717712, -95.338219,map);
building17.setBuildingMap();
setBuildings.push(building17);

building18=new buildingObject('Carl Lewis International Track & Field Complex','CLTF',29.72669, -95.348206,map);
building18.setBuildingMap();
setBuildings.push(building18);

building19=new buildingObject('Physical Plant Greenhouse','PHPG',29.713264, -95.348831,map);
building19.setBuildingMap();
setBuildings.push(building19);

building19=new buildingObject('College of Technology','T2',29.723358, -95.342636,map);
building19.setBuildingMap();
setBuildings.push(building20);
}

    </script>




</head>
<body onload="initialize()">

<div id='change' class='fstquad'>

floor plans and camera data

<!--<img src="UHlogo.jpg" style="width:100%; height:90%" />-->
</div>
<div id='map_canvas' class='sndquad'>

 <!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
      $(".sndquad").html('<object style="width:100%; height:100%;" data="http://172.27.140.52/EmergencyPortal.php">');
    </script>
-->





</div>
<div class='trdquad'>
<button type="button" id="target">
click here
</button>
door monitoring
<img src="UHlogo.jpg" style="width:100%; height:90%" />
</div>
<script>
$("#target").click(function() {
$("#change").html("<img src='floorplans/T2_2.jpg' style='width:90%; height:90%' />");
});
</script>
<div class='fthquad'>
camera view
<img src="UHlogo.jpg" style="width:100%; height:90%" />
</div>
</body>
</html>

1 个解决方案

解决方案1
 0  2013-06-27 19:01:23

The html in the infowindow isn't part of the DOM until the InfoWindow has opened (the "domready" event fires) 在InfoWindow打开之前，infowindow中的html才是DOM的一部分（“ domready”事件将触发）

You can use your jQuery code if you run it in an event listener on the infowindow's domready event: 如果在信息窗口的domready事件的事件侦听器中运行它，则可以使用jQuery代码： 

google.maps.event.addListener(infowindow,"domready" function() {
  $("#target").click(function() {
  $("#change").html("<img src='floorplans/T2_2.jpg' style='width:100%; height:90%' />");
});

(assumes infowindow is a reference to the google.maps.InfoWindow in question) （假设infowindow是对有问题的google.maps.InfoWindow的引用）

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在单击按钮时显示一个分区并同时隐藏另一个分区？ - How to show one division on clicking button and hide another division at the same time? 将一个部门划分到另一个部门 - Snap a division to another division 标记内容（infoWindow）谷歌地图 - Marker content (infoWindow) Google Maps 谷歌地图-获取infoWindow内容 - Google maps - get infoWindow content 自定义InfoWindow内容&gt; Google Maps - Custom InfoWindow Content > Google Maps Google Maps Infowindow按钮onclick - Google Maps Infowindow Button onclick 单击Google Maps标记时添加infoWindow气泡 - Add infoWindow bubble on clicking Google Maps marker Google地图单击Div以触发InfoWindow - Google Maps Clicking on a Div to Trigger InfoWindow Google Chrome 84 + Google Maps InfoWindow：点击关闭按钮时防止网页跳转 - Google Chrome 84 + Google Maps InfoWindow: Prevent webpage jump when clicking close button 将KnockoutJS绑定到Google Maps InfoWindow内容 - Binding KnockoutJS to Google Maps InfoWindow content
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM