<html lang="en"> <head> <meta charset="UTF-8"> <title>Exercise #2: Map of properties</title> <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapProp = { center: new google.maps.LatLng(63, 6), zoom: 4, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); <?php $props = $prop->listProperties(); for ($i = 0; $i < count($props); $i++) { // markers echo "var marker" . $i . " = new google.maps.Marker({\n position: new google.maps.LatLng(" . $props[$i]['latitude'] . ", " . $props[$i]['longitude'] . ")\n });\n marker" . $i . ".setMap(map);\n"; // info windows $infoContent = "<div style='float:left;margin-right: 10px;'><img src='images/" . $props[$i]['photo'] . "' width='100px' /></div>" . "<h3>" . $props[$i]['name'] . "</h3><h4 style='margin-top:0'>" . $props[$i]['location'] . "</h4>" . "<p> " . $props[$i]['description'] . "</p>"; echo "var infowindow" . $i . " = new google.maps.InfoWindow({\n content: \"" . $infoContent . "\",\n maxWidth: 300\n });\n marker" . $i . ".addListener('click', function() {\n infowindow" . $i . ".open(map, marker" . $i . ");\n });\n"; } ?> } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:700px;height:400px;"></div> </body>