JSFiddle - React, Tailwind, and code Playground

by Robert Dodd

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form id="search-form" >
    <input type="text" name="searchfield" id="searchfield" /><br/>
    <input type="hidden" name="placeinfo" id="placeinfo" />
    <input type="submit" value="Search" /><br/>
</form>
<div id="placename"></div>
<div id="map_canvas" class="gmap border_box"></div>
        
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

CSS

.gmap {
    width:100%;
    height:250px;
    border: 1px solid #4D2722;
}
.border_box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

var map;
var service;
var infowindow;
var service;
var validated = false;

function initialize() {
	
    //set up google map
	map = new google.maps.Map(document.getElementById('map_canvas'), {
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: new google.maps.LatLng(-27.420538,153.028107),
		zoom: 10
	});
	
    //initialize places service to perform TextSearch
	service = new google.maps.places.PlacesService(map);
    
    //add method to validator
    jQuery.validator.addMethod("validateaddress", function(value, element) { 
        if (validated) {
            return true;
        } else {
            // address is not validated yet, look up on Google Maps
            var request = {
                query: $("#searchfield").val()
            };
            service.textSearch(request, textsearchcallback);
            return false
        }
    }, "Please specify the correct domain for your documents");
	
	$("#search-form").validate({
		rules: {
			searchfield: {
				required: true,
                validateaddress: true
			},
            placeinfo: {
                required: false
            }
		},
        submitHandler: function(form) {
            alert('valid form submitted');
            validated = false;
        }
	});
}

function textsearchcallback(results, status) {
	if (status == google.maps.places.PlacesServiceStatus.OK) {
		var place = results[0];
        $("#placeinfo").val(JSON.stringify(place)); // set the value of the hidden input
        $("#placename").text(place.name); //for demo
		validated = true; // set to true so form will submit
		$("#search-form").submit(); //submit the form
	} else {
		alert("NO RESULTS FOUND!");
	}
}

$(function(){
   initialize(); 
});