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.

yes..that I want to know how to show all the available markers from the database.. — NewUser, Sep 05 '13 at 07:09

score 2 · Accepted Answer · answered Sep 07 '13 at 12:01

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

score 0 · Answer 2 · answered Aug 31 '13 at 20:32

0

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

answered Aug 31 '13 at 20:32

Marco Marsala

2,332
5
25
39

is this good to use like this or should I use xml data to show the markers? – NewUser Aug 31 '13 at 20:38
Yes gmap3 accepts only this way (javascript object in initializator). If you have data in XML you should write a php parser that generates the JavaScript syntax or a JavaScript parser that uses addMarker to dynamically add markers after initialization – Marco Marsala Sep 01 '13 at 20:24

Lucky · Answer 3 · 2013-09-05T07:28:14.793

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.

Yes I want that type but the documentation is poorly written. I am not getting it properly... — NewUser, Sep 05 '13 at 06:46
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Ankur, Sep 05 '13 at 07:02

score 0 · Answer 4 · answered Sep 09 '13 at 13:44

0

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.

answered Sep 09 '13 at 13:44

Bas Wildeboer

580
6
13

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

4 Answers4