Gather the Co-Ordinates & Draw them to Google Map

Question 1

I have managed to solve. Here is the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

        $(document).ready(function(){
            var coordinates, parsedCoordinates;
            var map;
            var marker;
            var markers = [];
            var clusterer;
            var bounds = new google.maps.LatLngBounds();
            var coords = new google.maps.LatLng(0, 0);
            var infowindow = new google.maps.InfoWindow();
            map_initialize(); // load map

            function map_initialize(){

                //Google map option
                var googleMapOptions = 
                {
                    center: coords,
                    zoom: 0, //zoom level, 0 = earth view to higher value
                    panControl: true, //enable pan Control
                    zoomControl: true, //enable zoom control
                    scaleControl: true, // enable scale control
                    mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
                };

                map = new google.maps.Map(document.getElementById("map_container"), googleMapOptions);
                //  Fit these bounds to the map
                map.fitBounds(bounds);

                // Marker Clusterer setup
                var mcOptions = {
                  gridSize : 50,
                  maxZoom : 15
                };


            }

            $(':submit').on('click', function() { // This event fires when a button is clicked

                $.ajax({ // ajax call starts
                      url: 'allCoordinates.php', // JQuery loads allCoordinates.php
                      dataType: 'json', // Choosing a JSON datatype
                      success: function(data) // Variable data contains the data we get from serverside
                      {
                          for (i = 0; i < data.length; i++) {
                            bounds.extend(new google.maps.LatLng(data[i].latitude, data[i].longitude));

                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
                                map: map,
                                icon: 'http://maps.google.com/mapfiles/ms/icons/red.png'
                            });

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    infowindow.setContent("Test");
                                    infowindow.open(map, marker);
                                }
                            })(marker, i));

                            markers.push(marker);
                          }
                          // Fit these bounds to the map
                          map.fitBounds(bounds);

                          clusterer = new MarkerClusterer(map, markers);
                      }
                });
                return false; // keeps the page from not refreshing 
            });
        });

    </script>

Question 2

There are a number of problems I can see:

1) You're defining map within initialize which means that no other function can access and update it. Declare map outside of the functions.

2) You're not accessing the markers array properly; it's an array of objects so you need to use the keys to get the data instead:

3) You need to initialise the map differently (I would use google's own window.load event for this). Don't do it within in the jQuery doc.ready function.

4) When you're adding your markers you're doing so only if the map changes. Why? Get rid of that bit of code and your markers will be added to the map.

Here's a DEMO.

$(function () {

  // code for clicking the button.

});

var map;

function update(markers) {

  for (var i = 0; i < markers.length; i++) {

    var lat = markers[i].latitude;
    var lng = markers[i].longitude;

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, lat, lng) {
      return function() {
        infowindow.setContent(lat + " " + lng);
        infowindow.open(map, marker);
      }
    })(marker, lat, lng));

  }

}

function initialize(markers) {
  // your code
}

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