Hello,
for semplicity I tested my application in an html page. And seems it working. It is a simple application that read some points in a table and then shows them like markers in a google maps map.
Now I need to insert this page into index.php in views/site (i think).
Of course there are some java script and also the calling to dsn, login, password, host of the database.
Now I came to the questions.
How to call the db inside this page?
Where must put the javascript and recall them always from my home page?
This is the code that I need to merge with my rest of application in Yii:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My App</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
var map;
var center = new google.maps.LatLng(45.648611, 13.78);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
makeRequest('get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
}
function displayLocation(marker) {
var content = '<div class="infoWindow"><strong>' + marker.description + '</strong>'
+ '<br/>' + marker.address
+ '<br/>' + marker.description + '</div>';
if (parseInt(marker.lat) == 0) {
geocoder.geocode( { 'address': marker.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.marker,
title: marker.description
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
});
} else {
var position = new google.maps.LatLng(parseFloat(marker.lat), parseFloat(marker.lng));
var marker = new google.maps.Marker({
map: map,
position: position,
title: marker.description
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
}
</script>
</head>
<body onload="init();">
<section id="main">
<div id="map_canvas" style="width: 100%; height: 700px;"></div>
</section>
</body>
</html>