google maps jquery + geocoder

by rixlabs

HTML

<body>
    <div id="map" ></div>

    <div id="data" style="width:50%;  display:none;">
      Detail data
      
    </div>
      <script>

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9utzeckd8pV-IwFik5jVgTtG84QhDjfI&callback="
    async defer></script>
  </body>

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        width: 100%;
        float:left;
      }
      
      .location{
        border: 1px solid black;
        margin-bottom: 5px;
        font-family: helvetica;
      }

JavaScript

var map;

var locations = [
    [
            "clientDigital",
            12.9965541, 80.2559071,
            4,
            "Steven F. Morris",
            "Sandfiddler Pawn Shop",
            "5429 Tidewater Dr.",
            "found"
        ],
        [
            "Aubrica the Mermaid (nee: Aubry Alexis)",
            36.8618, -76.203,
            5,
            "Myke Irving/ Georgia Mason",
            "USAVE Auto Rental",
            "Virginia Auto Rental on Virginia Beach Blvd",
            "found"
        ]
    ];


$(document).ready(function(){
    initMap();
function drawMarker(map, location) {
		console.log(location);
    return new google.maps.Marker({
        map: map,
        position: location
    });
}
var geocoder = new google.maps.Geocoder;
var marker;
function codeAddress(address) {
    geocoder.geocode({ 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            marker = drawMarker(map,results[0].geometry.location);
            marker.addListener('click', function() {
             map.setCenter(marker.getPosition());
              document.getElementById("map").style.width = "50%";
              google.maps.event.trigger(map, 'resize')
             	map.setCenter(marker.getPosition());
              document.getElementById("data").style.display = "inline";
              
       				var template = "";
              for(i = 0; i< locations.length;i++){
              	template = template + "<div class='location'><h1>"+locations[i][0]+"</h1><h2>"+locations[i][4]+"</h2><h2>"+locations[i][5]+"</h2><h2>"+locations[i][6]+"</h2></div>"
              }
              document.getElementById("data").innerHTML = template;
              
            });
        }
    });
}

codeAddress("Sydney, NSW");



});

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

 
}