How to display multiple location markers by address using google map api?

Question

I don't want to display multiple markers using latitude and longitude, Only by addresses which are stored in mysql database. Latitude and Longitude are not stores in the table.

I have worked on it and was successful in displaying one marker, but my web app requires me to display multiple markers according to the location Here's the code:

<?php include_once("dbcon.php") ;
?>
<html>
<?php
$search = $_POST['search'];
$results = mysql_query("SELECT * FROM eventsTable WHERE eventLocation LIKE '%$search%'");
while ($row = mysql_fetch_assoc($results)) {
        $ename = $row["eventName"];
        $edate = $row["eventDate"];
        $edetail=$row["eventDetails"];
        $eloc = $row["eventLocation"];
        $ecity = $row["eventCity"];

        echo "<p> ".json_encode($eloc)."</p>"; echo json_encode($ecity);    }
?>

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var address = "<?php echo $eloc; ?>,<?php echo $ecity; ?>, PK";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(30.51687, 69.40949);
    var myOptions = {
      zoom: 10,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
 <div id="map_canvas" style= "right-padding=0px; width:50%; height:50%">
</body>
</html>

Please, [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and consider using PDO, [it's not as hard as you think](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, May 18 '15 at 20:44
How many "more markers"? The geocoder will work for about 10 without hitting the query/rate limit. — geocodezip, May 18 '15 at 20:50

score 0 · Answer 1 · edited May 23 '17 at 12:21

I don't want to display multiple markers using latitude and longitude, Only by addresses which are stored in mysql database.

Unfortunately, Google Maps API requires latitude/longitude in order to add a marker to a map. You should consider using the GeoLocation API to convert your addresses into coordinates first, then you can add the markers in the traditional fashion.

If this isn't possible, you can use AJAX to retrieve the latitude/longitude in a loop (like in this answer), but you might hit the rate limit as mentioned in this question's comments.

score 0 · Answer 2 · edited May 23 '17 at 11:43

You are only outputting one address in your PHP code:

var address = "<?php echo $eloc; ?>,<?php echo $ecity; ?>, PK";

You need to create an array of addresses and process that array.

Proof of issues with array of more than 11 addresses

See OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down? (Andrew Leach's answer) for a way to deal with the OVER_QUERY_LIMIT.

How to display multiple location markers by address using google map api?

2 Answers2