TechQA.

Hide/Show some placemarks in google maps with geoxml3

1.9k views Asked by At

I load a map with 3 layers:

var myOptions = {
    center: new google.maps.LatLng(36.82907321372808, -4.46044921875),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: false,
    afterParse: useTheData
});

geoXml.parse('data/file1.kml');
geoXml.parse('data/file2.kml');
geoXml.parse('data/file3.kml');

Who could I hide some placemarks without I've to hide all the layer?? I've added some extra information in the KML to detect all points/poligons I must hide, but I don't know if it's the best way to work. Although it's ok, how could I detect that TAG in the KML to use for example geoXml.docs[1].markers[xx].setVisible(false); (in my case, I want to hide where "Codigo"-tag='PRA-239')

file2.kml

<?xml version='1.0' encoding='UTF-8' ?>
<kml>
    <Document>
        <Style id='Ruta_PRA'>
            <LineStyle>
                <color>
                    FF0FC4F1
                </color>
                <width>
                    3
                </width>
            </LineStyle>
            <IconStyle>
                <color>
                    ff00ff00
                </color>
                <colorMode>
                    random
                </colorMode>
                <scale>
                    1
                </scale>
                <Icon>
                    <href>
                        http://webclientes/static/url_web/img/ico0FC4F1.png
                    </href>
                </Icon>
            </IconStyle>
        </Style>
        <Placemark>
            <name>
            </name>
            <description>
                <![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa1' title='PR-A 239 Algatocín – Benarrabá'>PR-A 239 Algatocín – Benarrabá</a></div>]]>
            </description>
            <Codigo>
                PRA-239
            </Codigo>
            <Point>
                <coordinates>
                    -5.28165881693292,36.5697241462153
                </coordinates>
            </Point>
            <styleUrl>
                #Ruta_PRA
            </styleUrl>
        </Placemark>
        <Placemark>
            <name>
            </name>
            <description>
                <![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa2' title='PR-A 267 Pico del Vilo'>PR-A 267 Pico del Vilo</a></div>]]>
            </description>
            <Codigo>
                PRA-267
            </Codigo>
            <Point>
                <coordinates>
                    -4.25874817605722,36.9917987986663
                </coordinates>
            </Point>
            <styleUrl>
                #Ruta_PRA
            </styleUrl>
        </Placemark>
        <Placemark>
            <name>
            </name>
            <description>
                <![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/gransenda/es/etapas3' title='PR-A 239 Los Nacimientillos – Las Pilas'>PR-A 239 Los Nacimientillos – Las Pilas</a></div>]]>
            </description>
            <Codigo>
                PRA-239
            </Codigo>
            <Point>
                <coordinates>
                    -5.27479155176616,36.5748306219344
                </coordinates>
            </Point>
            <styleUrl>
                #Ruta_PRA
            </styleUrl>
        </Placemark>
        <Placemark>
            <name/>
            <description>
                <div style='line-height:1.35;overflow:hidden;white-space:nowrap;'>
                    <a href='http://webclientes/gransenda/es/etapa4'
                    title='PR-A 239 Estación de Benaoján - Jimera de Líbar'>PR-A 239 Estación de Benaoján - Jimera de Líbar</a>
                </div>
            </description>
            <Codigo>
                PRA-239
            </Codigo>
            <Snippet/>
            <MultiGeometry>
                <LineString>
                    <tessellate>
                        1
                    </tessellate>
                    <altitudeMode>
                        clampToGround
                    </altitudeMode>
                    <coordinates>
                        -5.246115,36.712255 -5.246242,36.711970 -5.245898,36.711291 -5.246101,36.710594 -5.246349,36.710255 -5.246487,36.710018 -5.246646,36.709709 -5.246632,36.709610 -5.246664,36.709555 -5.247046,36.708836 -5.247169,36.708446 -5.247158,36.708447 -5.247331,36.708245 -5.247536,36.707971 -5.247756,36.707849 -5.248103,36.707843 -5.248390,36.707684 -5.248586,36.707500 -5.249162,36.706931 -5.249552,36.706473 -5.249954,36.706059 -5.250237,36.705396 -5.250541,36.704687 -5.250748,36.704125 -5.251148,36.703234 -5.251524,36.702307 -5.251659,36.701944 -5.251694,36.701628 -5.251785,36.701284 -5.251692,36.701169 -5.252050,36.701153 -5.252483,36.700676 -5.252957,36.700397 -5.253486,36.700116 -5.253737,36.699904 -5.253765,36.699723 -5.253746,36.699435 -5.253754,36.698976 -5.253678,36.698662 -5.253574,36.698528 -5.253344,36.698334 -5.253048,36.698178 -5.252681,36.697869 -5.252312,36.697480 -5.252177,36.697068 -5.252196,36.696950 -5.252238,36.696499 -5.252412,36.695928 -5.253225,36.695407 -5.253622,36.695202 -5.253826,36.694900 -5.254006,36.694185 -5.254206,36.693740 -5.254406,36.693303 -5.254887,36.692537 -5.255040,36.692038 -5.255026,36.691561 -5.255367,36.691356 -5.255789,36.690861 -5.256510,36.690631 -5.257143,36.690466 -5.257749,36.690148 -5.257873,36.689794 -5.257743,36.689554 -5.257585,36.689106 -5.257587,36.688790 -5.257901,36.688442 -5.258015,36.688142 -5.258325,36.687641 -5.258517,36.687322 -5.258842,36.686946 -5.259048,36.686708 -5.259908,36.686277 -5.260423,36.685907 -5.261241,36.685567 -5.261831,36.685456 -5.262433,36.684985 -5.262624,36.684648 -5.262938,36.684291 -5.262693,36.683935 -5.262521,36.683803 -5.262475,36.683371 -5.262539,36.683253 -5.262595,36.683261 -5.263097,36.683603 -5.263492,36.682937 -5.264012,36.682350 -5.264624,36.681852 -5.265169,36.681382 -5.265862,36.680945 -5.266519,36.680464 -5.267414,36.679717 -5.268154,36.678991 -5.268156,36.678666 -5.268347,36.678320 -5.268315,36.677609 -5.268758,36.677087 -5.269847,36.676075 -5.270768,36.675426 -5.271303,36.674956 -5.272051,36.674140 -5.272673,36.673245 -5.273898,36.671887 -5.274522,36.671794 -5.274968,36.671389 -5.275326,36.670986 -5.275634,36.670800 -5.276111,36.669168 -5.276541,36.668574 -5.277033,36.667790 -5.277255,36.667371 -5.278421,36.666682 -5.278542,36.666625 -5.278771,36.666414 -5.279480,36.665796 -5.279685,36.665549 -5.279741,36.665142 -5.279989,36.664840 -5.280355,36.664734 -5.280331,36.664671 -5.280318,36.664608 -5.280300,36.664753 -5.280464,36.664642 -5.280645,36.664692 -5.280715,36.664060 -5.280889,36.663480 -5.280960,36.663253 -5.281333,36.662994 -5.281388,36.662200 -5.281294,36.661688 -5.281429,36.660946 -5.281451,36.660540 -5.281603,36.659654 -5.281627,36.659707 -5.281352,36.659460 -5.281043,36.658871 -5.280998,36.658458 -5.281028,36.658340 -5.280924,36.657873 -5.281009,36.657691 -5.281004,36.657529 -5.280969,36.657494 -5.280996,36.656898 -5.281252,36.656470 -5.281733,36.656100 -5.281901,36.655718 -5.282211,36.654829 -5.282163,36.654362 -5.282061,36.654327 -5.281499,36.654230 -5.280409,36.653287 -5.280104,36.653193 -5.279092,36.652239 -5.279082,36.652293 -5.278748,36.652354 -5.278670,36.652364 -5.278705,36.652400 -5.277976,36.651963 -5.276952,36.651739 -5.276605,36.651376 -5.276318,36.650751 -5.276110,36.650521 -5.275614,36.649989 -5.275233,36.649582
                    </coordinates>
                </LineString>
            </MultiGeometry>
            <styleUrl>
                #Ruta_PRA
            </styleUrl>
        </Placemark>
        ...
    </Document>
</kml>
javascript google-maps geoxml3
Original Q&A
1

There are 1 answers

1
geocodezip On BEST ANSWER

You can add a custom parse function to put the contents of the <Codigo> as a property of the placemark, for use in a button click handler function.

Proof of concept code snippet:

var geoXml;
var map;

function initialize() {
var myOptions = {
    center: new google.maps.LatLng(36.82907321372808, -4.46044921875),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: false,
    pmParseFn: parsePlacemark,
    // afterParse: useTheData
});
    geoXml.parseKmlString(file2kml);

    google.maps.event.addDomListener(document.getElementById('toggle'), 'click', toggle);

}
// Custom placemark parse function
function parsePlacemark (node, placemark) {
      var tagNodes = node.getElementsByTagName('Codigo');
      var tag = null;
      if (tagNodes && tagNodes.length && (tagNodes.length > 0)) {
        placemark.tag = geoXML3.nodeValue(tagNodes[0]);
      }
}

function toggle() {
    var tag = document.getElementById('tag').value;
    for (var i=0; i < geoXml.docs[0].placemarks.length; i++) {
        if (geoXml.docs[0].placemarks[i].tag == tag)
            if (geoXml.docs[0].placemarks[i].marker.getMap() == null) {
                geoXml.docs[0].placemarks[i].marker.setMap(map);
            } else {
                geoXml.docs[0].placemarks[i].marker.setMap(null);
            }
    }
}

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

var file2kml = "<?xml version='1.0' encoding='UTF-8' ?><kml><Document><Style id='Ruta_PRA'><LineStyle><color>FF0FC4F1</color><width>3</width></LineStyle><IconStyle><color>ff00ff00</color><colorMode>random</colorMode><scale>1</scale></IconStyle></Style><Placemark><name></name><description><![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa1' title='PR-A 239 Algatocín – Benarrabá'>PR-A 239 Algatocín – Benarrabá</a></div>]]></description><Codigo>PRA-239</Codigo><Point><coordinates>-5.28165881693292,36.5697241462153</coordinates></Point><styleUrl>#Ruta_PRA</styleUrl></Placemark><Placemark><name></name><description><![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/url_web/etapa2' title='PR-A 267 Pico del Vilo'>PR-A 267 Pico del Vilo</a></div>]]></description><Codigo>PRA-267</Codigo><Point><coordinates>-4.25874817605722,36.9917987986663</coordinates></Point><styleUrl>#Ruta_PRA</styleUrl></Placemark><Placemark><name></name><description><![CDATA[<div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/gransenda/es/etapas3' title='PR-A 239 Los Nacimientillos – Las Pilas'>PR-A 239 Los Nacimientillos – Las Pilas</a></div>]]></description><Codigo>PRA-239</Codigo><Point><coordinates>-5.27479155176616,36.5748306219344</coordinates></Point><styleUrl>#Ruta_PRA</styleUrl></Placemark><Placemark><name/><description><div style='line-height:1.35;overflow:hidden;white-space:nowrap;'><a href='http://webclientes/gransenda/es/etapa4'title='PR-A 239 Estación de Benaoján - Jimera de Líbar'>PR-A 239 Estación de Benaoján - Jimera de Líbar</a></div></description><Codigo>PRA-239</Codigo><Snippet/><MultiGeometry><LineString><tessellate>1</tessellate><altitudeMode>clampToGround</altitudeMode><coordinates>-5.246115,36.712255 -5.246242,36.711970 -5.245898,36.711291 -5.246101,36.710594 -5.246349,36.710255 -5.246487,36.710018 -5.246646,36.709709 -5.246632,36.709610 -5.246664,36.709555 -5.247046,36.708836 -5.247169,36.708446 -5.247158,36.708447 -5.247331,36.708245 -5.247536,36.707971 -5.247756,36.707849 -5.248103,36.707843 -5.248390,36.707684 -5.248586,36.707500 -5.249162,36.706931 -5.249552,36.706473 -5.249954,36.706059 -5.250237,36.705396 -5.250541,36.704687 -5.250748,36.704125 -5.251148,36.703234 -5.251524,36.702307 -5.251659,36.701944 -5.251694,36.701628 -5.251785,36.701284 -5.251692,36.701169 -5.252050,36.701153 -5.252483,36.700676 -5.252957,36.700397 -5.253486,36.700116 -5.253737,36.699904 -5.253765,36.699723 -5.253746,36.699435 -5.253754,36.698976 -5.253678,36.698662 -5.253574,36.698528 -5.253344,36.698334 -5.253048,36.698178 -5.252681,36.697869 -5.252312,36.697480 -5.252177,36.697068 -5.252196,36.696950 -5.252238,36.696499 -5.252412,36.695928 -5.253225,36.695407 -5.253622,36.695202 -5.253826,36.694900 -5.254006,36.694185 -5.254206,36.693740 -5.254406,36.693303 -5.254887,36.692537 -5.255040,36.692038 -5.255026,36.691561 -5.255367,36.691356 -5.255789,36.690861 -5.256510,36.690631 -5.257143,36.690466 -5.257749,36.690148 -5.257873,36.689794 -5.257743,36.689554 -5.257585,36.689106 -5.257587,36.688790 -5.257901,36.688442 -5.258015,36.688142 -5.258325,36.687641 -5.258517,36.687322 -5.258842,36.686946 -5.259048,36.686708 -5.259908,36.686277 -5.260423,36.685907 -5.261241,36.685567 -5.261831,36.685456 -5.262433,36.684985 -5.262624,36.684648 -5.262938,36.684291 -5.262693,36.683935 -5.262521,36.683803 -5.262475,36.683371 -5.262539,36.683253 -5.262595,36.683261 -5.263097,36.683603 -5.263492,36.682937 -5.264012,36.682350 -5.264624,36.681852 -5.265169,36.681382 -5.265862,36.680945 -5.266519,36.680464 -5.267414,36.679717 -5.268154,36.678991 -5.268156,36.678666 -5.268347,36.678320 -5.268315,36.677609 -5.268758,36.677087 -5.269847,36.676075 -5.270768,36.675426 -5.271303,36.674956 -5.272051,36.674140 -5.272673,36.673245 -5.273898,36.671887 -5.274522,36.671794 -5.274968,36.671389 -5.275326,36.670986 -5.275634,36.670800 -5.276111,36.669168 -5.276541,36.668574 -5.277033,36.667790 -5.277255,36.667371 -5.278421,36.666682 -5.278542,36.666625 -5.278771,36.666414 -5.279480,36.665796 -5.279685,36.665549 -5.279741,36.665142 -5.279989,36.664840 -5.280355,36.664734 -5.280331,36.664671 -5.280318,36.664608 -5.280300,36.664753 -5.280464,36.664642 -5.280645,36.664692 -5.280715,36.664060 -5.280889,36.663480 -5.280960,36.663253 -5.281333,36.662994 -5.281388,36.662200 -5.281294,36.661688 -5.281429,36.660946 -5.281451,36.660540 -5.281603,36.659654 -5.281627,36.659707 -5.281352,36.659460 -5.281043,36.658871 -5.280998,36.658458 -5.281028,36.658340 -5.280924,36.657873 -5.281009,36.657691 -5.281004,36.657529 -5.280969,36.657494 -5.280996,36.656898 -5.281252,36.656470 -5.281733,36.656100 -5.281901,36.655718 -5.282211,36.654829 -5.282163,36.654362 -5.282061,36.654327 -5.281499,36.654230 -5.280409,36.653287 -5.280104,36.653193 -5.279092,36.652239 -5.279082,36.652293 -5.278748,36.652354 -5.278670,36.652364 -5.278705,36.652400 -5.277976,36.651963 -5.276952,36.651739 -5.276605,36.651376 -5.276318,36.650751 -5.276110,36.650521 -5.275614,36.649989 -5.275233,36.649582</coordinates></LineString></MultiGeometry><styleUrl>#Ruta_PRA</styleUrl></Placemark></Document></kml>";
html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<input type="button" value="toggle" id="toggle" /><input type="text" id="tag" value="PRA-239" />
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

proof of concept fiddle

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-MAPS

Related Questions in GEOXML3

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions