JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
  
    </script>
</head>
<body>
    <div id="map-canvas"></div>
    <span class="result"></span>
</body>

CSS

html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
.results{
    display:block;
    postion:absolute;
    bottom:0;
}

JavaScript

var input = prompt ("שם רחוב ועיר");
var zLevel = prompt("הקש רמת זום בין 1 ל20")
var place = input.replace(/\s/g,'+');

console.log(input.replace(/\s/g,'+'));
            var baseURI = 'http://maps.googleapis.com/maps/api/geocode/json?address='+place+'&sensor=true';
console.log(baseURI);
$.get(baseURI, function(data) {
      var map;
    console.log("data");
console.log(data);


        //google.maps.event.addDomListener(window, 'load', initialize);
    function makeMap(lat,lng,zLevel){
                console.log('lat ' + lat, 'lng ' + lng);
            var mapOptions = {
                zoom: zLevel,
                center: new google.maps.LatLng(lat,lng),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
    }
    var loc = data.results[0].geometry.location;
  makeMap(loc.lat,loc.lng,19,zLevel);
});
//var obj = res.responseJSON.results[0].geometry.location;