<!--<div class="col-md-9 column">-->

<!--<style>
       #map-canvas {
        height: 80%;
        margin: 0px;
        padding: 0px
      }
    </style>-->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
        function initialize() {

<?php
for ($i = 0; $i < count($geo_info); $i++) {
    foreach ($geo_info[$i] as $v_info) {
        ?>

                    var myLatlng<?php echo $v_info->geo_id ?> = new google.maps.LatLng(<?php echo $v_info->latitude ?>,<?php echo $v_info->longitude ?>);
        <?php
    }
}
?>

            var mapOptions = {
                zoom: 2,
                center: new google.maps.LatLng(0, 0),
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


<?php
for ($i = 0; $i < count($geo_info); $i++) {
    foreach ($geo_info[$i] as $v_info) {
        $name = $v_info->person_first_name . ' ' . $v_info->person_last_name;
        ?>

                    var marker = new google.maps.Marker({
                        position: myLatlng<?php echo $v_info->geo_id ?>,
                        map: map,
                        title: '<?php echo $name . ',' . $v_info->city_name ?>',
                    });



        <?php
    }
}
?>


//  var infowindow = new google.maps.InfoWindow({
//      content: "miron jahan",
//      maxWidth: 200
//  });
//
//  google.maps.event.addListener(marker, 'click', function() {
//    infowindow.open(map,marker);
//  });



        }

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

    </script>

    <div id="map-canvas" style="height: 450px;width: 700px;"></div>


<!--</div>-->