Develop Reference

Googlemaps places Autocomplete by className - JS loop Problem

I need to add Autocomplete to input fields by ClassName. I got it to work but Google does not sent the Address with Postalcode back.
So I am trying to use addListener to insert the formatted_address on the input field.
In this example the input[i] on the autocomplete.addListener is not working:
function initMap() {
var input = $('.my_adresse');
for (i = 0; i < input.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(input[i], {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$(input[i]).val(place.formatted_address);
});
}
}
On this example only the last Element of the loop is working:
var input = $('.my_adresse');
for (i = 0; i < input.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(input[i], {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change= input[i];
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$(input_to_change).val(place.formatted_address);
});
}
}
Why am I getting just the last element of the loop?
What is the best solution to get the Complete Address with postal code using Google Maps places Autocomplete?

One way to address the issue is with function closure, create a createAutocomplete function to hold closure on the input and the autocomplete object:
function createAutocomplete(input, index) {
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change = input;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
console.log(place);
$(input).val(place.formatted_address);
});
}
and call that in your loop:
for (i = 0; i < input.length; i++) {
createAutocomplete(input[i], i);
}
proof of concept fiddle
code snippet:
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var bounds = new google.maps.LatLngBounds();
var input = $('.my_adresse');
for (i = 0; i < input.length; i++) {
createAutocomplete(input[i], i);
}
function createAutocomplete(input, index) {
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change = input;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
console.log(place);
if (place != null) {
$(input).val(place.formatted_address);
if (place.geometry.location) {
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title: "" + index
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
}
}
});
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 70%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pac-card" id="pac-card">
<div>
<div id="title">
Autocomplete search
</div>
</div>
<div id="pac-container">
<input id="pac-input" class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

How to pass a javascript data to another page?

I have code like this:
<input type="text" id="start" name="o">
<input type="text" id="end" name="d">
<input type="text" id="total" name="total" hidden="hidden">
<button onclick="calcRoute();" value="/index.php?route=information/mymove" >text</button>
<script>
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotalDistance(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("total").value = total + " km";
}
</script>
If I use this code for the button:
<input type="button" value="go" onclick="calcRoute();"> this executes the javascript function, but does not pass the data to another page.
I have also this part in the controller file:
if (isset($this->request->post['o'])) {
$data['o'] = $this->request->post['o'];
}
if (isset($this->request->post['d'])) {
$data['d'] = $this->request->post['d'];
}
if (isset($this->request->post['total'])) {
$data['total'] = $this->request->post['total'];
}

A few important things: you need to make this button a proper submit button, you need to make sure it returns callback as opposed to calling the function directly and you need to make sure the callback returns false. This is how to prevent default behaviour which would be sending the form without running the script.
<form action="index.php?route=information/mymove" method="post">
<input type="text" id="start" name="o">
<input type="text" id="end" name="d">
<input type="text" id="total" name="total" hidden="hidden">
<button type="submit" onclick="return calcRoute();">text</button>
</form>
<script>
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotalDistance(response);
}
});
return false;
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("total").value = total + " km";
}
</script>

I think you should be able to modify the computeTotalDistance function so that once all the calculations are complete it will add the total value to the desired hidden input and then submit the form.
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").value = total + " km";
if( total && document.getElementById("total").value!='' ) document.getElementById("total").parentNode.submit();
}
Alternatively another option would be to use this same callback function to send and ajax request to the same endpoint url.
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").value = total + " km";
/* send the total by ajax to endpoint url */
ajax.call( this, url, 'total='+total, (r)=>{
alert(r);
} );
}
function ajax( url, params, callback ){
with( new XMLHttpRequest() ){
onreadystatechange=function(e){
if( this.status==200 && this.readyState==4 ){
callback.call( this.response )
}
}
open( 'POST', url, true );
setRequestHeader('Content-Type','application/x-www-form-urlencoded');
send( params );
}
}
It was not originally stated that you wished to view the total in another page, merely that you wished to send the value to another page. As that is a requirement then ajax, in this case, is not the best option at all - as there is a form it should be submitted as my initially modified function tries to do.
update:
Full example, tested and working which emulates what your code is trying to do.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/*
consider this as "another page" - the form has submitted to here
and you can see the POST data...
*/
exit(printf('<pre>%s</pre>',print_r($_POST,true)));
}
?>
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: Route Calculations</title>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
<script>
function initMap(){
let _lat = 56.55;
let _lng = -2.72;
let _form = document.querySelector( 'form[name="route-plotter"]' );
let latlng=new google.maps.LatLng( _lat, _lng );
let options = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
let map = new google.maps.Map( document.getElementById('map'), options );
const calcroute=function(){
let request = {
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
let directionsService = new google.maps.DirectionsService();
let directionsDisplay = new google.maps.DirectionsRenderer();
directionsService.route(request, function(response, status) {
if ( status == google.maps.DirectionsStatus.OK ) {
directionsDisplay.setDirections( response );
calculatedistance( response );
}
});
};
const calculatedistance=function(result){
let total=0;
let route=result.routes[0];
route.legs.forEach( leg=>{
total+=leg.distance.value;
});
document.getElementById('total').value=total;
_form.submit();
};
_form.querySelector('button').addEventListener('click',calcroute,false)
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
</head>
<body>
<div id='map'></div>
<form name='route-plotter' method="post">
<input type="text" id="start" name="start" value="dundee" />
<input type="text" id="end" name="end" value="aberdeen" />
<input type="text" id="total" name="total" hidden="hidden">
<button type="button">Go get the distance</button>
</form>
</body>
</html>

ng-repeat not working until after submit button is hit twice

I am messing with the google maps API and using angular, and I am having an issue binding the data from the API to a variable and displaying it correctly with an ng-repeat. The ng-repeat is supposed to list the name property of the place objects, but it does not do that unless I enter the same zipcode twice. Here is the html:
<!DOCTYPE html>
<html ng-app = "openApp">
<head>
<meta charset="utf-8">
<title>Open Sesame</title>
<script src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyArO1n-5w8xxPblR_aDxV6Ul1VLik3_pRY&libraries=places"></script>
<script src = "vendors/angular/angular.min.js"></script>
<script src = "assets/scripts/composite.all.min.js"></script>
<link rel = "stylesheet" href = "assets/styles/style.css" />
</head>
<body ng-controller = "MainController as main">
<h1>Is it open?</h1>
<!-- <button ng-click = ""></button> -->
<div id = "googleMap"></div>
<form>
<input type = "text" ng-model = "main.zipcode"/>
<input type = "submit" ng-click = "main.enterZip()" />
</form>
<div id = "displayInfo">
<ul>
<li ng-repeat = "item in main.openPlaces">
test {{item.name}}
</li>
</ul>
</div>
</body>
</html>
and here is the client side javascript:
angular.module('openApp', [])
.controller('MainController', ['$http', function($http){
var vm = this;
vm.latitude;
vm.longitude;
vm.openPlaces = [];
initialize();
vm.enterZip = function(){
$http.get('/zipcodeApi/'+ vm.zipcode)
.then(function(response){
vm.latitude = response.data.lat;
vm.longitude = response.data.lng;
initialize();
})
}
function initialize(){
var mapLocation = new google.maps.LatLng(vm.latitude, vm.longitude);
var openNow = [];
var mapProp = {
center: mapLocation,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var placesRequest = {
location: mapLocation,
radius: '2000',
types: ['restaurant'],
keyword: 'restaurant',
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(placesRequest, function(results, status) {
if(status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var listedHours = results[i].opening_hours;
if(typeof listedHours != 'undefined' && listedHours.open_now === true){
openNow.push(results[i]);
var place = results[i];
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
}
}
}
vm.openPlaces = openNow;
})//closes nearbySearch()
}
}]);

MainController would work because you named your controller MainController in the JS file. And that's the same reason MainController as main won't work.

how to draw polygons one above another polygon

I'm new to google maps api ,i'm trying to draw polygons using google maps api , I want to show the project of the polygon and that project polygon above (inside) allow to draw the building polygon.
I'm trying to clear all my polygon objects before I import new geoJSON data and create new objects.I can't seem to get the setMap(null) function to work correctly. Hopefully someone can kindly let me know where I am failing.
demo
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<input type="hidden" id="center_point" value="12.939884,77.62540710000007" />
<input type="hidden" id="projectPolygon" value="" />
<input type="hidden" id="autocompleteLat" value="12.939884" />
<input type="hidden" id="autocompleteLng" value="77.62540710000007" />
<input type="hidden" id="poly_map_codes" value="" />
<input type="hidden" id="zoom_level" value="18" />
<textarea id="xml_valuesMain" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea>
<textarea id="xml_values" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea>
<div id="init_map" style="height: 600px;"></div>
<script>
$(function(){
initMap();
});
function initMap()
{
var polygons = [];
var coordinates = [];
var markers=[];
var latt=$('#autocompleteLat').val();
var lngg=$('#autocompleteLng').val();
var amsterdam = new google.maps.LatLng(latt,lngg);
var zoom_level=parseInt($('#zoom_level').val());
var map = new google.maps.Map(document.getElementById('init_map'),{ center: amsterdam, zoom: zoom_level, mapTypeId:google.maps.MapTypeId.SATELLITE });
drawSecondPolygon();
function drawSecondPolygon()
{
google.maps.event.trigger(map, 'refresh');
var data =$('#xml_values').val();
var jsonData = JSON.parse(data);
var polygons = [];
console.log("polygon length="+polygons.length);
for( var i = 0; i < polygons.length; i++ )
{
polygons[i].setMap(null)
}
polygons.length = 0;
for (var i = 0; i < jsonData.length; i++)
{
var latArr = jsonData[i].latlng;
var source_d = jsonData[i].source;
arr = [];
for(j=0; j<latArr.length;j++)
{
var lat=latArr[j].lat;
var lng=latArr[j].lng;
arr.push(new google.maps.LatLng(parseFloat(lat),parseFloat(lng)));
}
if(source_d=="project") { var FillColor='#DA70D6'; var StrokeColr='#BA55D3'; var editval=false; }
else if(source_d=="tower") { var FillColor='#FF8800'; var StrokeColr='#FF8800'; var editval=true; }
else if(source_d=="amenity") { var FillColor='#990000'; var StrokeColr='#990000'; var editval=false; }
else { var FillColor='#66FF00'; var StrokeColr='#66FF00'; var editval=false; }
polygons.push(new google.maps.Polygon({
paths: arr,
Source:source_d,
strokeColor: StrokeColr,
strokeOpacity: 0.8,
strokeWeight: 2,
editable:editval,
clickable:true,
fillColor: FillColor,
fillOpacity: 0.35
}));
console.log("polygons.length="+polygons.length);
polygons[polygons.length-1].setMap(null);
polygons[polygons.length-1].setMap(map);
if(editval==false)
{
console.log("Something working fine");
google.maps.event.addListener(polygons[polygons.length-1], 'click', function (clickEvent)
{
polygons[polygons.length-1].setMap(null);
var newLatLng=$('#poly_map_codes').val();
var clickEventLat=clickEvent.latLng.lat();
var clickEventLng=clickEvent.latLng.lng();
if(newLatLng!='') { newLatLng+=","+clickEventLat+" "+clickEventLng; }
else { newLatLng+=clickEventLat+" "+clickEventLng; }
$('#poly_map_codes').val(newLatLng);
//console.log(newLatLng);
//drawSecondPolygon();
if(newLatLng)
{
var getLatLng=newLatLng;
var getLatLngArr=getLatLng.split(",");
var main_LatLngArr=[];
for(i=0; i<getLatLngArr.length; i++)
{
var my_object={};
var getLatLngExp=getLatLngArr[i].split(" ");
my_object.lat=getLatLngExp[0];
my_object.lng=getLatLngExp[1];
main_LatLngArr.push(my_object);
}
var LatLngObj={};
LatLngObj.source="tower";
LatLngObj.latlng=main_LatLngArr;
var oldPolyArr=$('#xml_valuesMain').val();
var oldPolyArr=JSON.parse(oldPolyArr);
oldPolyArr.push(LatLngObj);
$('#xml_values').val(JSON.stringify(oldPolyArr));
polygons[polygons.length-1].setMap(null);
drawSecondPolygon();
console.log("oldPolyArr="+JSON.stringify(oldPolyArr));
}
});
}
}
}
}
</script>

At a first look you redeclare the var polygons = []; in your drawSecondPolygon function this override the content of the same variable declared in initMap ..
thi comment this line .. so you can use always the parent polygons array
function drawSecondPolygon()
{
google.maps.event.trigger(map, 'refresh');
var data =$('#xml_values').val();
var jsonData = JSON.parse(data);
//var polygons = [];

Google maps api v3 waypoints not showing on the map

I'm working on a google maps v3 project and i've come to a point where i need some help. I have a google map where the user can enter a start and end points, which works fine but when i want to enter waypoints for some reason they wont work( up to 8 waypoints ). Could someone look at the code and help me?
This is how far i have come with the project:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<link href="map_style.css" rel="stylesheet">
<script src="jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="maps.js"></script>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<body onload="initialize()">
<div id="total"></div>
<div id="map-canvas"></div>
<div id="control_panel">
<div id="user_input">
<label for="start">Start :</label>
<input type="text" id="start" name="start" /><br />
<i>Add multiple Stops along the route (Optional)</i><br />
<ul id="stops">
<li>
<label for="stop1">Stop 1:</label>
<input type="text" id="stop1" name="stop1" />
</li>
</ul>
<input type="button" id="addScnt" value="Add Stop" /><br />
<label for="end">End :</label>
<input type="text" id="end" name="end" /><br />
<br />
<input type="submit" value="Create Route" onclick="calcRoute();" />
<input type="button" id="button" value="Show/Hide Directions" onclick="toggle_visibility('directions_panel');" />
</div>
</div>
<div id="directions_panel"></div>
</body>
</html>
And this is my js file:
$(document).ready(function () {
var scntUl = $('#stops');
var ii = $('#stops').size() + 1;
var MaxInputs = 8;
$('#addScnt').live('click', function () {
if (ii <= MaxInputs) {
$('<li><label for="stop' + ii +'">Stop ' + ii + ': </label><input type="text" id="stop' + ii +'" name="stop' + ii + '" /><input type="button" id="remScnt" value="X" /></li>').appendTo(scntUl);
ii++;
}
return false;
});
$('#remScnt').live('click', function () {
if (ii > 2) {
$(this).parents('li').remove();
ii--;
}
return false;
});
});
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.LatLng(37.09, -95.71);
var mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: map
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions_panel"));
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
for (var ii = 0; ii < thisStop; ii++) {
var thisStop = document.getElementById("stop" + (ii+1)).value;
if (thisStop.length > 0) {
if (thisStop.length > 0) {
waypts[ii] = {location: thisStop};
}
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
}
computeTotalDistance(response);
});
}
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
var miles = 0.000621371192;
document.getElementById("total").innerHTML = ("Total distance is: "+ (Math.round( totalDist * miles * 10 ) / 10 ) + " miles " + " and " + " Approximate time is: " + (totalTime / 60 / 60).toFixed(1) + " hours.");
}
If someone needs more info please let me know. Thank you

That's a lot of code to look at. Can you put up a test page, or even a fiddle?
In the meantime, I do see a problem here:
var scntUl = $('#stops');
var ii = $('#stops').size() + 1;
$('#stops') gives you a jQuery object for the <ul id="stops"> element itself, not its children. The length of this object will be 1 no matter how many <li> elements you add inside it. Perhaps you want $('#stops>li') instead? That will give you a jQuery object containing all of the <li> elements.
(BTW you can use the .length property instead of the .size() method - the method is there only for compatibility with old code.)
Also, why are you adding 1 to that length? I didn't look at the code much beyond that, but if you want the number of <li> elements you would just take .length as it is.
I also noticed that the <input> elements all have id="remScnt". You shouldn't use an id more than once; use a class or generate unique ids (or both).
One other thing - .live() is deprecated; use .on instead.
Updated after you posted the map link...
Take a look at this code:
for (var ii = 0; ii < thisStop; ii++) {
var thisStop = document.getElementById("stop" + (ii+1)).value;
if (thisStop.length > 0) {
if (thisStop.length > 0) {
waypts[ii] = {location: thisStop};
}
}
}
There are at least three or four problems here. But rather than try to fix this code as it is, why not take advantage of jQuery to make it easier?
First, go back to the code in your #addScnt click handler where it appends each new <li> into the DOM, and add a classname to the <input> tag, e.g.
<input class="waypoint" ...and the existing attributes here... />
And then where you have that loop above, change it to:
var waypts = [];
$('.waypoint').each( function( i, input ) {
var value = $(input).val();
if( value.length ) waypts.push({ location: value });
});
Note that this code no longer depends on the inputs having the IDs stop1, stop2, etc. Unless you need those IDs elsewhere, you can remove them.
Also I noticed you still have this code:
var scntUl = $('#stops>li');
var ii = $('#stops').length;
What do you think the value of ii will be here? Also, later you have this:
$('<li>...</li>').appendTo(scntUl);
That can't be right. Shouldn't this be appending to #stops itself? You're nesting <li> elements now, which is not what you intended.
Finally, use the Developer Tools in Chrome or another browser to troubleshoot these problems. SO is a great resource, of course, and questions here are always welcome. But it's even better when you can troubleshoot the problems you run into right now with the Developer Tools in Chrome or other browsers. It's worth spending some time exploring all the options available there. Start here for a tutorial on the Chrome DevTools.