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

Answer 2

gmap3 initializator has a marker attribute that allows you to create markers.

See example with single and multiple markers here: http://gmap3.net/en/catalog/10-overlays/marker-41

Answer 3

I think this example might help.

Updated:

If you want to read the data like from database (or) xml, You can then make an ajax request to that page (from any page on your site) using jQuery:

I have an example but this is with xml to get the data from xml file.

$.ajax({
  url: 'categories.xml (or) your database path',
  type: 'get',
  success: function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }

        // == show or hide the categories initially ==
        show("theatre");
        hide("golf");
        hide("info");
        // == create the initial sidebar ==
        makeSidebar();
      });

      });

Like this you may get the data from database also through using queries. Try this one atleast you may get the idea.

Answer 4

The gmaps3 plugin documentation shows how to add markers. If you create an options array in php through ajax/json and feed that to the markers: option your markers should be added.