1

I edit javascript for showing googlemaps.
I want to show infowindow always only one(like googlemapsV2).
I tried infowindow.close before infowindow.open. But infowindow.close is not working.
I search same subjest on this site and trying, but I cannot resolve.
I post my script under.
Please help 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 i = 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 a 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();
NorthCat
  • 9,643
  • 16
  • 47
  • 50
Midori Iriyama
  • 19
  • 2
  • 1
    Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue (including sample XML and any required HTML/CSS) – geocodezip Apr 28 '15 at 01:47
  • Possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip Apr 28 '15 at 01:51
  • thanks,i will try to male this code simple but I neet to fulfills these functions...please wait. – Midori Iriyama Apr 28 '15 at 03:05

1 Answers1

0

You create separate infoWindows for each marker(the markers may not access the infowindows of the other markers, infowindow always points to the infoWindow of the clicked marker).

Create a single infoWindow instead.

    parseXmlData: function (xml) {

        //a single infowindow for all markers
        var infowindow = new google.maps.InfoWindow({
            pixelOffset: new google.maps.Size(0, 10)
        });

        var i = 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 for marker
                google.maps.event.addListener(beachMarker, 'click',
                    function () {
                        //update the 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 a Tag
                san.putData(name, url, lat, lng, i);
            });
    }
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • This script is perfect.In addition to this, if it is linked from the article of a specific id(by parameter), I want to show only the infowindow with the id, how do you know what I do? – Midori Iriyama Apr 30 '15 at 23:43