<style>
    #map {height: 300px;}
    #map img {max-width: inherit;}
    .main-content2{
        background-color: #fff;
    }
    .main-content2 a{
        color: #001f3f;
    }
    .introtext {
        font-size: 16px;
        text-align: center;
    }
    .single_teaser{
        text-align: center;
    }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var lat;
    var lng;
    var map;
 
    //type your address after "address="
    jQuery.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address={{$data["DiaChi"]}}&sensor=false', function(data) {
        lat = data.results[0].geometry.location.lat;
        lng = data.results[0].geometry.location.lng;
    }).complete(function(){
            dxmapLoadMap();
        });
 
    function attachSecretMessage(marker, message)
    {
        var infowindow = new google.maps.InfoWindow(
            { content: message
            });
//        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
//        });
    }
 
    window.dxmapLoadMap = function()
    {
        var center = new google.maps.LatLng(lat, lng);
        var settings = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 16,
            scrollwheel: false,
            center: center
        };
        map = new google.maps.Map(document.getElementById('map'), settings);
 
        var marker = new google.maps.Marker({
            position: center,
            title: 'traluat.vn',
            map: map
        });
        marker.setTitle('traluat.vn'.toString());
        //type your map title and description here
        attachSecretMessage(marker, '<h4>{{$data["Name"]}}</h4>{{$data["DiaChi"]}}');
    }
 
 
 
 
 
 
</script>
 
<section id="map">
</section>