incorporating php variables into javascript - php

Question

I am wondering how I might add variables from my php code into a javascript code.
For example, my query results in vertreklat, vertreklong, aankomstlat, aankomstlong
My javascript code:
echo "<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script>
/* ***** Start CustomMarker ***** */
function CustomMarker(latlng, map, marker_id, hovercard) {
this.latlng_ = latlng;
this.marker_id = marker_id;
this.hovercard_content = hovercard;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.id=me.marker_id;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.className = 'map-marker show-hovercard';
div.style.left = (point.x-6) + 'px';
div.style.top = (point.y-23) + 'px';
$(div).attr('data-hovercard-content', me.hovercard_content);
}
};
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
/* ***** End CustomMarker ***** */
function initialize() {
var markers = [];
var bounds = new google.maps.LatLngBounds();
var myOptions = {
center: new google.maps.LatLng(20, 20),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: false,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
pos = new google.maps.LatLng(vertreklat, vertreklong);
overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(aankomstlat, aankomstlong);
overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(vertreklat, vertreklong),new google.maps.LatLng(aankomstlat,
aankomstlong)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
flightPath.setMap(map);
map.fitBounds(bounds);google.maps.event.addListener(map, 'zoom_changed',
function() {
if(map.getZoom()<2) {
map.setZoom(2);
}
});
}
$(document).ready(function() {
initialize();
});
</script>";
All of the data that needs to come from my query goes within this part of the script:
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
pos = new google.maps.LatLng(**vertreklat, vertreklong**);
overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(**aankomstlat, aankomstlong**);
overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(**vertreklat, vertreklong**),new google.maps.LatLng(**aankomstlat,
aankomstlong**)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
flightPath.setMap(map);
But I am confused as to how to accomplish this task....

Answer 1

Try this:
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(".$row['vertreklat'].",".$row['vertreklong']."),new google.maps.LatLng(".$row['aankomstlat'].",".$row['aankomstlong'].")], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
Since you started the echo wqith double quotes you can use them again to break the string and concatenate with dot .. By the way should your PHP variables not have a $ ?

Answer 2

For such long blocks of output, instead of echo return back literal output with ?>. Then insert small blocks of <?php ... ?> where you need to echo variables.
?>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script>
/* ***** Start CustomMarker ***** */
function CustomMarker(latlng, map, marker_id, hovercard) {
this.latlng_ = latlng;
this.marker_id = marker_id;
this.hovercard_content = hovercard;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.id=me.marker_id;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.className = 'map-marker show-hovercard';
div.style.left = (point.x-6) + 'px';
div.style.top = (point.y-23) + 'px';
$(div).attr('data-hovercard-content', me.hovercard_content);
}
};
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
/* ***** End CustomMarker ***** */
function initialize() {
var markers = [];
var bounds = new google.maps.LatLngBounds();
var myOptions = {
center: new google.maps.LatLng(20, 20),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: false,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
pos = new google.maps.LatLng(<?php echo $vertreklat ?>, <?php echo $vertreklong ?>);
overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(<?php echo $aankomstlat ?>, <?php echo $aankomstlong ?>);
overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(vertreklat, vertreklong),new google.maps.LatLng(<?php echo $aankomstlat ?>, <?php echo $aankomstlong ?>)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
flightPath.setMap(map);
map.fitBounds(bounds);google.maps.event.addListener(map, 'zoom_changed',
function() {
if(map.getZoom()<2) {
map.setZoom(2);
}
});
}
$(document).ready(function() {
initialize();
});
</script>

Answer 3

You can use short echo open tag:
<script>
var foo = <?=$foo?>;
console.log(foo);
</script>
or use AJAX