JSFiddle - React, Tailwind, and code Playground

by farhatabbas

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
 <button onclick="hide_markers_kml();">hide</button>
  <button onclick="unhide_markers_kml();">unhide</button>
  <button onclick="map.setCenter(myLatLng); map.setZoom(18);">google</button>
  <button onclick="map.setCenter(new google.maps.LatLng(38.870832443487,-77.05580139178142));map.setZoom(16);">pentagon</button>
  <button onclick="map.setCenter(new google.maps.LatLng(36.10860519,-112.249061));map.setZoom(12);">Grand Canyon</button>
  <button onclick="map.setCenter(new google.maps.LatLng(37.688011,14.9915465449));map.setZoom(10);">Mt. Etna</button>

        <div id="map_canvas">
        </div>
        <div id="map_text">
        </div>

CSS

html, body, #map_canvas {
	width:   100%;
	height:  480px;
	margin:  0;
	padding: 0;
}

JavaScript

var geoXml = null;
var map = null;
var myLatLng = null;
            jQuery(document).ready(function(){
                // jQuery('#map_text').append("Hello");
                // var myLatlng = new google.maps.LatLng(39.397, -100.644);
                // var latlng = new google.maps.LatLng(44.797012, 7.382345);
                // googleplex 37.422104808,-122.0838851 zoom = 18
                myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
                
                var myOptions = {
                    zoom: 10,
                    center: new google.maps.LatLng(37.422104808,-122.0838851),
                    // zoom: 5,
                    // center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                
                geoXml = new geoXML3.parser({
                    map: map,
                    singleInfoWindow: true,
                    zoom: false,
                    percentOpacity:50,
                    afterParse: useTheData
                });
                geoXml.parse('path_to_your_kml_file');
            });
            
            function useTheData(doc){
                // Geodata handling goes here, using JSON properties of the doc object
                // map.fitBounds(geoXml.doc[0].bounds);
                // alert("doc[0].bounds = "+doc[0].bounds);
                // map.setCenter(myLatLng);
                // map.setZoom(18);
                for (var i = 0; i < doc[0].markers.length; i++) {
                    // console.log(doc[0].markers[i].title);
                    jQuery('#map_text').append(doc[0].markers[i].title + ', ');
                }
            };

   function hide_markers_kml(){

            geoXml.hideDocument();  // see geoxml3-modify: http://geocontext.org/pliki/2010/test-geoxml3/test2/geoxml3-modify.js

   }

   function unhide_markers_kml(){

           ...