Hi, I'm trying to incorporate google maps into my apex report. I've managed to get it working with version3 of the API, when I call it in HTML as a header, however I need to add markers from a table, so I need to wrap it up in PL/SQL and loop through. However when I try and wrap the basic HTML code it fails to work as a PL/SQL region.
Original HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA387n7efUcis5emZlSNcOmwwZkhsFW8Qc&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(-34.890542, 150.274856);
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-34.890542, 150.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.890542, 150.474856),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</BODY>
</html>
Wrapped in PL/SQL and placed into an PL/SQL region on the same page.
htp.print('<html>');
htp.print('<head>');
htp.print('<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />');
htp.print('<style type="text/css">');
htp.print('html { height: 100% }');
htp.print('body { height: 100%; margin: 0; padding: 0 }');
htp.print('#map_canvas { height: 100% }');
htp.print('</style>');
htp.print('<script type="text/javascript"');
htp.print('src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA387n7efUcis5emZlSNcOmwwZkhsFW8Qc&sensor=false">');
htp.print('</script>');
htp.print('<script type="text/javascript">');
htp.print('function initialize() {');
htp.print('var latLng = new google.maps.LatLng(-34.890542, 150.274856);');
htp.print('var myOptions = {');
htp.print('center: new google.maps.LatLng(-34.397, 150.644),');
htp.print('zoom: 8,');
htp.print('mapTypeId: google.maps.MapTypeId.ROADMAP');
htp.print('};');
htp.print('var map = new google.maps.Map(document.getElementById("map_canvas"),');
htp.print('myOptions);');
htp.print('var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';');
htp.print('var myLatLng = new google.maps.LatLng(-34.890542, 150.274856);');
htp.print('var beachMarker = new google.maps.Marker({');
htp.print('position: latLng,');
htp.print('map: map,');
htp.print('icon: image');
htp.print('});');
htp.print(' ');
htp.print('var marker = new google.maps.Marker({');
htp.print('position: new google.maps.LatLng(-34.890542, 150.474856),');
htp.print('map: map');
htp.print('});');
htp.print(' ');
htp.print('}');
htp.print('</script>');
htp.print('</head>');
htp.print('<body onload="initialize()">');
htp.print('<div id="map_canvas" style="width:100%; height:100%"></div>');
htp.print('</BODY>');
htp.print('</html>');
Anyone have any ideas?
Edited by: Andyindo on Mar 23, 2012 5:11 PM