What I am trying to achieve is once a user puts the city in an input it will load a Google map for that specific city, and also display the weather data on the selected city.
I am "newish" and am having a hard time finding examples on how to write out the PHP to send off to the HTML and so on and so on.
<body>
<header>
<div class="tag-line">
<h1>... Tag line ...</h1>
</div>
<div class="bg-head-img"></div>
</header>
<nav>
<p>... Navigtion goes here ...</p>
</nav>
<main>
<div class="lefts">
<div class="panel">
<h2>Choose a City</h2>
<form>
<div class="form-box">
<input type="text" id="city" placeholder="type here a city name ...">
</div>
<div class="form-box">
<input type="button" id="get-map" value="Get Map">
</div>
<div class="form-box">
<input type="button" id="get-weather" value="Get Weather">
</div>
</form>
<div class="feedback">
<p></p>
</div>
</div>
<div class="panel weather-container">
<h2>Weather Today</h2>
<div class="container">
<img src="https://www.mikeafford.com/store/store-images/ms02_example_heavy_rain_showers.png" class="initial-img" alt="placeholder">
</div>
</div>
</div>
<div class="rights map-container">
<div class="panel">
<h2>City Map</h2>
<div id="map"></div>
</div>
</div>
</main>
<footer>
<p>... footer content ...</p>
</footer>
<!-- Google CDN jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Google Map JavaScript API -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Handle map here -->
<script src="js/get-map.js"></script>
<!-- Handle weather here -->
<script src="js/get-weather.js"></script>
I have commented out a PHP file, from what I think I am trying to achieve. This is the get-map.js
// start with $(document).ready(...
// Declare the variables: >>geolocation<<, >>lt<<, >>lg<<. You will need them later in the code
// handle click on Get Map here:
// when the button >>#get-map<< is clicked:
// Declare the variable >>city<<, fetch the value from text-field, trim it and pass it to variable >>city<<
// if >>city<< is not empty:
// send the ajax request for json to:
// https://maps.googleapis.com/maps/api/geocode/json?address=" + city + "&key=yourAPIkey"
// If request is successful call >>getCity<< otherwise call >>getError<<.
// These are callback functions belonging to done() and fail() jQuery methods
// if there is any error message inside the div with class >>.feedback<<, clear it.
// close if
// otherwise
// print the error message to div with the class >>.feedback<< ("please enter the city name...")
// end of else
// end of click handler
// declare the function >>getCity<< with parameter that stores the object created from json
// get the value of >>formatted_address<< from the object and pass it to <h2> belonging to
// the div with class >>.map-container<<
// get the values of >>lat<< and >>lng<< from the object and pass them to variables
// that you declared at the beginning of this document (lt and lg)
// call the function >>initialize<< and assign its parameters with >>lt<< and >>lg<< values
// This function is a part of Google Maps JavaScript API. It will draw the map based on the settings
// inside the object >>mapOptions<< and based on the given latitude and longitude. This
// function will also create the marker
// clear the input text-field
// end of getCity
// declare the function >>getError<< here (jqXHR, textStatus, errorThrown)
// alert the eventual error
// end of getError
function initialize(latitude, longitude) {
// basic setting only (this object has many other properties:
// https://developers.google.com/maps/documentation/javascript/controls)
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 8
};
// Draws the map using Map()
var createMap = new google.maps.Map(document.getElementById("map"), mapOptions);
// Defines your marker position. Position property is the place where marker shows up
var startPosition = new google.maps.Marker({
position: mapOptions.center,
map: createMap,
icon: "img/go.png"
});
}
// end of ready
Here is my get-weather.js
// start with $(document).ready(...
// Declare the variables: >>geolocation<<, >>lt<<, >>lg<<. You will need them later in the code
// Declare the variable >>collectWeather<< and assign it with empty string. You will need this
// variable to append weather data coming from json returned by php.
// handle click on Get Weather here:
// when the button >>#get-weather<< is clicked:
// access div with >>.container<< class inside the div with >>.panel<< class AND display animated gif >>ajax-loader.gif<<
// Declare the variable >>city<<, fetch the value from text-field, trim it and pass it to variable >>city<<
// if >>city<< is not empty:
// send the ajax request for json to:
// https://maps.googleapis.com/maps/api/geocode/json?address=" + city + "&key=yourAPIkey"
// If request is successful call >>callWeather<< otherwise call >>getError<<.
// These are callback functions belonging to done() and fail() jQuery methods
// if there is any error message inside the div with class >>.feedback<<, clear it.
// close if
// otherwise
// print the error message to div with the class >>.feedback<< ("please enter the city name...")
// end of else
// end of click handler
// declare the function >>callWeather<< with parameter that stores the object created from json
// get the value of >>formatted_address<< from the object and pass it to <h2> belonging to
// the div with class >>.weather-container<<
// get the values of >>lat<< and >>lng<< from the object and pass them to variables
// that you declared at the beginning of this document (lt and lg)
// concatenate these 2 variables: lt + "," + lg and pass them to
// variable >>geolocation<< that is also declared at the beginning of this document
// use ajax to request php file. Send >>geolocation<< to php file
// php file will return the json from forecast.io based on >>geolocation<<
// The ajax request will have 2 callbacks: >>getWeather<< if successful
// and >>getError<< if it fails
// clear the input text-field
// end of callWeather
// declare the function >>getWeather<< with parameter that stores php response
// use variable >>collectWeather<< to append the values of:
// >>icon<<, >>temperature<<, >>humidity<< and >>summary<< (part of the json returned by php)
// everything will need to be parsed in <ul>.
// access the div with >>.container<< class inside the div with >>.panel<< class AND
// pass the value of >>collectWeather<< in it
// empty >>collectWeather<<
// end of callWeather
// declare the function >>getError<< here (jqXHR, textStatus, errorThrown)
// alert the eventual error
// end of getError
// end of ready
