in the code below value in consolidated_cord[], value is not setting in the first time.
The script get called on button click.
<html>
<head>
<title>Map Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
type="text/javascript"></script>
<script type="text/javascript" src="js/map-script.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
#map_canvas {
height: 400px;
width: 600px;
margin-top: 0.6em;
}
</style>
<SCRIPT>
// jQ Block
$(document).ready(function(){
var map, infowindow, autocomplete, place, marker;
var position;
var startpt, endpt;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var geocoder;
var consolidated_cord = [];
{ // initializtion block -- will load default map
directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
position = new google.maps.LatLng(48.8742, 2.3470);
var mapOptions = {
center: position,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
// Start Point
startpt = document.getElementById('start');
autocomplete = new google.maps.places.Autocomplete(startpt);
autocomplete.bindTo('bounds', map);
endpt = document.getElementById('end');
autocomplete = new google.maps.places.Autocomplete(endpt);
autocomplete.bindTo('bounds', map);
marker = new google.maps.Marker(
{
position: position,
draggable:true,
animation: google.maps.Animation.DROP,
map: map
}
);
google.maps.event.addListener(marker, 'click', toggleBounce);
directionsDisplay.setMap(map);
}
/*
* "+"click - add input textfield
*/
var i = 1;
$('#addTextBox').click(function(){
if(i<=3){
var id = "wp"+(i);
$('<input id="'+id+'" type="text" size=50><br/>').fadeIn('slow').appendTo('#wayPointContainer');
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id));
autocomplete.bindTo('bounds', map);
i++;
}else{
alert('Sorry Upto 5 waypoints are allowed');
}
});
$('#Go').click(function(){
if ( $('#start').val() == "" || $('#end').val() == "" ){
alert('Start or End Empty');
return false;
}
// Array for storing all entered locations - will be used for geocoding
var loc_arr_geocode = [];
loc_arr_geocode.push($('#start').val());
// Checking if any waypoint available
var numWp = $('#wayPointContainer input').size();
//pushing waypoints in an array
var waypts = [];
for(var counter = 1; counter <= numWp; counter++){
if ($('#wp'+counter).val() != ""){
waypts.push({
location: $('#wp'+counter).val(),
stopover:true
});
loc_arr_geocode.push($('#wp'+counter).val());
}
}
loc_arr_geocode.push($('#end').val());
var request = {
origin:startpt.value,
destination:endpt.value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
//fetching coordinated
fetchCoordinates(loc_arr_geocode);
//saving cordintes in hidden form field
});
//Geocoder to fetch coordinates
function fetchCoordinates(loc_arr_geocode){
geocoder = new google.maps.Geocoder();
for( var i=0; i < loc_arr_geocode.length; i++){
geocoder.geocode( { 'address': loc_arr_geocode[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
consolidated_cord.push(results[0].geometry.location);
}else{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
save_cord();
}
function save_cord(){
alert(consolidated_cord[0]);
//$('#submit_cord').submit();
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
});
</SCRIPT>
</head>
<body>
<input id="start" type="text" size="50"> <br/>
<div id="wayPointContainer"></div>
<input id="end" type="text" size="50"> <br/>
<input id="addTextBox" type="button" value="+">
<input type="button" id="Go" value="Go"/>
<div id="map_canvas"></div>
<form id="submit_cord" name="submit_cord" action="save_cord.php" method="post">
<input type="hidden" id="cord" name="cord"/>
</form>
</body>
</html>
The time I click the button, it alerts 'undefined'. But on second time it alerts the coordinates.
