<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { /* center: {lat:{{ $koordinata->lng }} , lng:{{ $koordinata->lat }} },*/ zoom: 15 }); map.setCenter({lat:{{ $koordinata->lat }} , lng:{{ $koordinata->lng }} }); var marker = new google.maps.Marker({ map:map, position:{lat:{{ $koordinata->lat }} , lng:{{ $koordinata->lng }} } }); } </script> <ul> <li> {{ $koordinata->lat }} {{ $koordinata->lng }} </li> </ul> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8gUrKIK6UryDcJOEZD9V3fxpdDk8s4Lo&callback=initMap" async defer></script> </body> </html>