Gmap3 show all the available markers on the map from database?

Question

I am using gmap3 plugin to show google map. In my case I have stored all the information of properties in the database(mysql) with custom markers. Now I want that when the page is loaded it will display all the markers in google map. For loading googlemap with gmap3 plugin I am using this code

function loadMap() {
  jQuery(document).ready(function(){
    if(typeof gMap == 'undefined') {
      //// CREATES A MAP
      gMap = jQuery('#map-canvas');
      gMap.gmap3({
        map: {
          options: {
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: false
          }
        }
      });
    }
  });
}

and inside div ``map-canvas I can see the map. But can some one kindly tell me how to show all the markers with the positions? Any help and suggestions will be really appreciable. Thanks.

Update If I am wrong with my codes then someone can show their codes to me. I am using Gmap3 plugin.

Answer 1

I am not sure about this it will work in gmap3 but i use this code for creating my costome icon hope it will help you

In the index.php use this for creating your costom icon pathlike this

<?php
     $query = "SELECT * FROM markers WHERE 1";
     $result = mysql_query($query);     
    $a=array();
    while ($row = @mysql_fetch_assoc($result)){ $a='$row[\'type\']'=>array('icon'=>'$row[\'path\']','shadow'=>'$row[\'path2\']')
    }     
        $a=json_encode($a);
        ?>

it should be done before js file after that write this

<script>
        var customIcons= <?php echo $a; ?>;
    </script> 

and finally load your map and infoWindowbox() in that function

function infoWindowbox() {
     downloadUrl("xml.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow,
                animation: google.maps.Animation.DROP
              });
              markerArray.push(marker);
              bounds.extend(marker.position);
              bindInfoWindow(marker, map, infoWindow, html);
            }
            map.fitBounds(bounds);
        //  var markerCluster = new MarkerClusterer(map, markerArray);
          });
}

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() {}