i edit javascript showing googlemaps.
want show infowindow one(like googlemapsv2).
tried infowindow.close before infowindow.open. infowindow.close not working.
search same subjest on site , trying, cannot resolve.
post script under.
please me.
var uptownmap, deflng = -73.963245, deflat = 40.779438, san ={ init : function(){ $(document).ready(function(){ var script = document.createelement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=san.putgmap"; document.body.appendchild(script); }); }, putgmap : function(){ var mylatlng = new google.maps.latlng(deflat, deflng); var myoptions = { zoom: 15, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap } uptownmap = new google.maps.map(document.getelementbyid("gmaparea"), myoptions); san.getxmldata(); }, getxmldata : function(){ $.ajax({ type: 'get', cache: true, async: true, url: '/newyork/map_uptown_xml/', datatype: 'xml', success: san.parsexmldata }); }, parsexmldata : function(xml){ var = 0, id,name, url, lat, lng, copy, lead, ename,tag; $("<ol/>").attr('id', 'gmapanchor').appendto('div#gmapcontroller'); $(xml).find('item').each(function(i){ i++; id = $(this).find('description id').text(); name = $(this).find('description name').text(); url = $(this).find('description path').text(); lat = $(this).find('description lat').text(); lng = $(this).find('description lng').text(); copy = $(this).find('description copy').text(); lead = $(this).find('description lead').text(); ename = $(this).find('description ename').text(); tag = $(this).find('description tag').text(); tag = tag.slice(5,20); var customicons = { hotel: { icon: 'http://www.tabikobo.com/newyork/img/icon_hotel.png' }, shopping: { icon: 'http://www.tabikobo.com/newyork/img/icon_shop.png' }, gourmet: { icon: 'http://www.tabikobo.com/newyork/img/icon_gourmet.png' }, kanko: { icon: 'http://www.tabikobo.com/newyork/img/icon_spot.png' }, }; var icon = customicons[tag] || {}; var mylatlng = new google.maps.latlng(lat, lng); var beachmarker = new google.maps.marker({ position: mylatlng, map: uptownmap, icon: icon.icon, }); var htmltmpl = { hotel: { content: '<div class="infowinwrapper"><strong><a href="' + url + '">' + name + '</a></strong><br />' + ename + '<br />' + lead + '</div>' }, shopping: { content: '<div class="infowinwrapper"><strong><a href="' + url + '">' + name + '</a></strong><br />' + ename + '<br />' + lead + '</div>' }, gourmet: { content: '<div class="infowinwrapper"><strong><a href="' + url + '">' + name + '</a></strong><br />' + ename + '<br />' + lead + '</div>' }, kanko: { content: '<div class="infowinwrapper"><strong><a href="#' + id + '">' + name + '</a></strong><br />' + ename + '<br />' + copy + '</div>' }, }; var htmltmpl = htmltmpl[tag] || {}; var offset = new google.maps.size(0, 10); var infowindow = new google.maps.infowindow({ content: '<div class="hook">'+htmltmpl.content+'</div>', pixeloffset: offset }); google.maps.event.addlistener(beachmarker, 'click', function() { if(infowindow) infowindow.close(); infowindow.open(uptownmap, beachmarker); }); google.maps.event.addlistener(infowindow, 'domready', function() { var l = $('.hook').parent().parent().parent().siblings().addclass("infobox"); }); //creat tag san.putdata(name, url, lat, lng, i); }); }, putdata : function(name, url, lat, lng, num){ var x = num; x += ''; if(x.length == 1){ var y = '0' + x; }else { y = x; } san.setevent(); }, setevent : function(){ $("ul#area_list li a").bind('mouseover', function(){ $(this).parent().find('span.lat').text(); var point = new google.maps.latlng( $(this).parent().find('span.lat').text(), $(this).parent().find('span.lng').text() ); uptownmap.setzoom(17); uptownmap.setcenter(point); }); $("#btnresetzoom a").bind('click', function(){ var point = new google.maps.latlng(deflat, deflng); uptownmap.setzoom(15); uptownmap.setcenter(point); return false; }); } } window.onload = san.init();
you create separate infowindows each marker(the markers may not access infowindows of other markers, infowindow points infowindow of clicked marker).
create single infowindow instead.
parsexmldata: function (xml) { //a single infowindow markers var infowindow = new google.maps.infowindow({ pixeloffset: new google.maps.size(0, 10) }); var = 0, id, name, url, lat, lng, copy, lead, ename, tag; $("<ol/>") .attr('id', 'gmapanchor') .appendto('div#gmapcontroller'); $(xml) .find('item') .each(function (i) { i++; id = $(this) .find('description id') .text(); name = $(this) .find('description name') .text(); url = $(this) .find('description path') .text(); lat = $(this) .find('description lat') .text(); lng = $(this) .find('description lng') .text(); copy = $(this) .find('description copy') .text(); lead = $(this) .find('description lead') .text(); ename = $(this) .find('description ename') .text(); tag = $(this) .find('description tag') .text(); tag = tag.slice(5, 20); console.log(tag) var customicons = { hotel: { icon: 'http://www.tabikobo.com/newyork/img/icon_hotel.png' }, shopping: { icon: 'http://www.tabikobo.com/newyork/img/icon_shop.png' }, gourmet: { icon: 'http://www.tabikobo.com/newyork/img/icon_gourmet.png' }, kanko: { icon: 'http://www.tabikobo.com/newyork/img/icon_spot.png' }, }; var icon = customicons[tag] || {}; var mylatlng = new google.maps.latlng(lat, lng); var beachmarker = new google.maps.marker({ position: mylatlng, map: uptownmap, icon: icon.icon, }); var htmltmpl = { hotel: { content: '<div class="infowinwrapper"><strong><a href="' + url + '">' + name + '</a></strong><br />' + ename + '<br />' + lead + '</div>' }, shopping: { content: '<div class="infowinwrapper"><strong><a href="' + url + '">' + name + '</a></strong><br />' + ename + '<br />' + lead + '</div>' }, gourmet: { content: '<div class="infowinwrapper"><strong><a href="' + url + '">' + name + '</a></strong><br />' + ename + '<br />' + lead + '</div>' }, kanko: { content: '<div class="infowinwrapper"><strong><a href="#' + id + '">' + name + '</a></strong><br />' + ename + '<br />' + copy + '</div>' }, }; var htmltmpl = htmltmpl[tag] || {}; //click-listener marker google.maps.event.addlistener(beachmarker, 'click', function () { //update content infowindow.setcontent( '<div class="hook">' + htmltmpl .content + '</div>'); infowindow.open(uptownmap, this); google.maps.event.addlisteneronce( infowindow, 'domready', function () { var l = $('.hook') .parent() .parent() .parent() .siblings() .addclass("infobox"); }); }); //creat tag san.putdata(name, url, lat, lng, i); }); } 