Sunday 19 June 2016

adding multiple markers to google maps using javascript and php

Adding multiple markers to google maps using javascript and php

adding multiple markers to google maps using javascript and php
Please Check Below File

Create map3.php File same as here

$conn = mysql_connect("localhost","root","");

mysql_select_db('yourdatabase');

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}

$query = mysql_query("select * from yourtable");



//header("Content-type: text/html");

/* Get lat and Lan using table query */
$i=0;

while($row = mysql_fetch_assoc($query)){
   

$reposnse['markers'][$i]['lat']= $row['lat'];
$reposnse['markers'][$i]['lag']= $row['lag'];


$i++;
}

echo json_encode($reposnse);
?>

After create map2.php same as here

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script type="application/javascript">

  

     

     $(document).ready(function(e) {
       


$.ajax({
url:"map3.php",
dataType: 'json',
success: function(result){
var html = '<markers>';


for (var prop in result['markers']) {

var value = result['markers'][prop];
//alert(value.lat);
html += '<marker ';
html += 'lat="';
html += value.lat+'"';
html += 'lng="';
html += value.lag+'"';
html += '/>';
}
html += '</markers>';
$('#test').html(html);

function initialize() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: new google.maps.LatLng(15.317277,75.71389),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

var infowindow = new google.maps.InfoWindow();

        var marker;

        var location = {};


var markers = document.getElementsByTagName("marker");


        for (var i = 0; i < markers.length; i++) {

//alert(markers[i].getAttribute("lat"));
            location = {
                name : 'test'+i,
                address : 'baglore',
                city : 'bangalore',
                state : 'Karnataka',
                zip : '560017',
                pointlat : parseFloat(markers[i].getAttribute("lat")),
                pointlng : parseFloat(markers[i].getAttribute("lng"))  
            };

            console.log(location);

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(location.pointlat, location.pointlng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker,location) {
                return function() {
                    infowindow.setContent(location.name);
                    infowindow.open(map, marker);
                };
            })(marker, location));
        }
  }

    google.maps.event.addDomListener(window, 'load', initialize);

},
});

    });
 
    </script>
</head>
<body>
    <div id="test">
    </div>

    <div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>

adding multiple markers to google maps using javascript and php

No comments:

Post a Comment

Thank You For Comment