2

Can anyone help me to get multiple custom markers on mapbox using lat/long from the database MySQL. I want to use 2 types of markers on the map, for which I have two separate table of lat/longs in the database.

I already done it by Google map but now I would like to do it with MapBox. My current code to show those markers in a map:

Google Maps Multiple Markers

  <?php 
    $a= array();
    $i=0;
    $sql= mysqli_query($con,"SELECT * FROM mapdata");

    while( $row =mysqli_fetch_array($sql)){
      $b=array();

      $b[]=$row["address"];
      $b[]=$row["latitude"];
      $b[]=$row["longitude"];
      $b[]=$row["id"];
      $b[]=$row["name"];        
         $a[$i]=$b;
         $i++;
     }
  ?>

  <?php

    $z = array();
    $n=0;
    $sql2= mysqli_query($con,"SELECT * FROM mapdatablue");

    while( $row2 =mysqli_fetch_array($sql2)){
      $y=array(); 

      $y[]=$row2["address"];
      $y[]=$row2["latitude"];
      $y[]=$row2["longitude"];
      $y[]=$row2["id"];
      $y[]=$row2["name"];    
      $z[$n]=$y;
      $n++;
     }

   ?>

<script type="text/javascript">
   var locations = <?php echo json_encode($a);?>;
   var locationsb = <?php echo json_encode($z);?>;
   var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 6,
       center: new google.maps.LatLng(22.00, 96.00),
       mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   var infowindow = new google.maps.InfoWindow();
   var image = '/marker/map.png';
   var image2 = '/marker/Map1.png';

   var marker, i;

   for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      offset: '0',
      icon: image,
      title: locations[i][4],
      map: map
   });

   google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        }
      })(marker, i));
   } 

   var marker1, n;
      for (n = 0; n < locationsb.length; n++) {  
         marker1 = new google.maps.Marker({
           position: new google.maps.LatLng(locationsb[n][1], locationsb[n][2]),
           offset: '0',
           icon: image2,
           title: locationsb[n][4],
           map: map       
        });


     google.maps.event.addListener(marker1, 'click', (function(marker1, n)
     {
       return function() {
          infowindow.setContent(locationsb[n][0]);
          infowindow.open(map, marker1);
       }
     })(marker1, n));
   }

  </script> 
 </body>
</html> 

**Output of this code **

Multipme markers by lat-longs in Google-map Thanks in advance, for any help

  • 1
    A friendly suggestion: you obviously know how to code, so what specific problem are you facing with MapBox. Asking people to translate an entire block of code from one environment to another is probably a bit off topic. – John Powell Dec 9 '14 at 6:55
  • Actually I am new to mapbox. So i don't know what exact code or function I should use on the place og google map code. Like to show map or show markers on map by fetching lat-long from database – Vikas Bendha Dec 9 '14 at 7:10
  • Well, I don't know MapBox either, but if I did want to learn it, I would start with a tutorial and have a go at converting my code. Good luck, anyway :D – John Powell Dec 9 '14 at 7:11
  • Do you have knowledge of map-box ? – Vikas Bendha Dec 9 '14 at 7:15
  • No, I use OpenLayers and Google Maps. But, the docs for Leaflet and Mapbox look really good. – John Powell Dec 9 '14 at 7:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.