Kamilnaja · June 12, 2017 19:38 · Kamilnaja · Jun 12, 2017
diff --git a/google maps cluster with xml b/google maps cluster with xml
 <!DOCTYPE html >
 <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
 </head>

 <body>
 <div id="map"></div>

    <script type="text/javascript">
    var map;
    var marker;
    var markerArray  = [];

    function initmap() {
        var myLatlng = new google.maps.LatLng(0.00,-8.6130819);
        var myOptions = {
            zoom: 2,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        var infoWindow1 = new google.maps.InfoWindow;
        var infoWindow = new google.maps.InfoWindow

 //  PHP file to parse and retrieve database points
        downloadUrl("data.xml", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("CARMA");
            for (var i = 0; i < markers.length; i++) {
                var MTCPERYEAR = markers[i].getAttribute("MTCPERYEAR");
                var PLANT = markers[i].getAttribute("PLANT");
                var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("LAT")),
                    parseFloat(markers[i].getAttribute("LON")));
                var html = "<b> Total CO2 emissions: </b> " + MTCPERYEAR + "<b> Mega Tons </b><br/><br/>"+"<b> Plant Name: </b>"+ PLANT;
                var html1 = PLANT;

                marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    draggable: true,
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
                });
                //marker array to allow clearin markers
                markerArray.push(marker);

                bindInfoWindow(marker, map, infoWindow1, html1);
                bindInfoWindow(marker, map, infoWindow, html);

                <!-- Add a listener for drag event and return lat and long -->
                google.maps.event.addListener(marker, 'dragend', function (event) {
                    document.getElementById("LAT").value = this.getPosition().lat();
                    document.getElementById("LON").value = this.getPosition().lng();
                });
                google.maps.event.addListener(marker, 'click', function() {
                    document.getElementById("PLANT").value = infoWindow1.getContent();
                });
            }
            var markerCluster = new MarkerClusterer(map, markerArray);
        });


        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
            });
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);
        }

        function doNothing() {};
    }
 </script>
 <script src="node_modules/js-marker-clusterer/src/markerclusterer.js"></script>
 <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaX7NHdKgC7pKkr0Eeu-HvF31h6aGTv4o&callback=initMap">
 </script>
 </body>
 </html>
	<!DOCTYPE html >
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Using MySQL and PHP with Google Maps</title>
	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 100%;
	}
	/* Optional: Makes the sample page fill the window. */
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>

	<script type="text/javascript">
	var map;
	var marker;
	var markerArray = [];

	function initmap() {
	var myLatlng = new google.maps.LatLng(0.00,-8.6130819);
	var myOptions = {
	zoom: 2,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.SATELLITE
	};
	map = new google.maps.Map(document.getElementById("map"), myOptions);
	var infoWindow1 = new google.maps.InfoWindow;
	var infoWindow = new google.maps.InfoWindow

	// PHP file to parse and retrieve database points
	downloadUrl("data.xml", function(data) {
	var xml = data.responseXML;
	var markers = xml.documentElement.getElementsByTagName("CARMA");
	for (var i = 0; i < markers.length; i++) {
	var MTCPERYEAR = markers[i].getAttribute("MTCPERYEAR");
	var PLANT = markers[i].getAttribute("PLANT");
	var point = new google.maps.LatLng(
	parseFloat(markers[i].getAttribute("LAT")),
	parseFloat(markers[i].getAttribute("LON")));
	var html = "<b> Total CO2 emissions: </b> " + MTCPERYEAR + "<b> Mega Tons </b><br/><br/>"+"<b> Plant Name: </b>"+ PLANT;
	var html1 = PLANT;

	marker = new google.maps.Marker({
	map: map,
	position: point,
	draggable: true,
	icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
	});
	//marker array to allow clearin markers
	markerArray.push(marker);

	bindInfoWindow(marker, map, infoWindow1, html1);
	bindInfoWindow(marker, map, infoWindow, html);

	<!-- Add a listener for drag event and return lat and long -->
	google.maps.event.addListener(marker, 'dragend', function (event) {
	document.getElementById("LAT").value = this.getPosition().lat();
	document.getElementById("LON").value = this.getPosition().lng();
	});
	google.maps.event.addListener(marker, 'click', function() {
	document.getElementById("PLANT").value = infoWindow1.getContent();
	});
	}
	var markerCluster = new MarkerClusterer(map, markerArray);
	});


	function bindInfoWindow(marker, map, infoWindow, html) {
	google.maps.event.addListener(marker, 'click', function() {
	infoWindow.setContent(html);
	infoWindow.open(map, marker);
	});
	}

	function downloadUrl(url, callback) {
	var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest;

	request.onreadystatechange = function() {
	if (request.readyState == 4) {
	request.onreadystatechange = doNothing;
	callback(request, request.status);
	}
	};

	request.open('GET', url, true);
	request.send(null);
	}

	function doNothing() {};
	}
	</script>
	<script src="node_modules/js-marker-clusterer/src/markerclusterer.js"></script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaX7NHdKgC7pKkr0Eeu-HvF31h6aGTv4o&callback=initMap">
	</script>
	</body>
	</html>