Basically I'm having a problem with getting google maps to tag addresses that are in my database, when I use php to do:
print codeAddress("example address");
it works fine, however, when I set it up as I have it here it doesn't even display the map, can anybody here help me with this issue?
Thanks,
Wakeeta
<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=AIzaSyAWiB6PqOyqsJJZLmoZ5CFb2IP6sqqhtI8&sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php
$dbh=mysql_connect('webdb.uvm.edu','swakita','PASSWORD');
if (!$dbh)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('SWAKITA', $dbh);
$addressprint = mysql_query("SELECT fldStreet FROM tblLocation");
while ($row = mysql_fetch_row($addressprint)) {
foreach ($row as $field) {
print "codeAddress($field)";
}
}
?>
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height:90%;top:30px"></div>
</body>
</html>
print "codeAddress($field)";
creates invalid Javascript code because when PHP expands the $field variable it will not be in quotes. This prevents the map from displaying because the Javascript encounters a fatal error. Try this:
print "codeAddress(\"$field\")";
Related
hello I made a code to open a webpage that contain the map with coordinates placed in a database I want to auto update the map with new markers of the new coordinates from that database
here is the code in php please help me
<?php
// read data
$account =mysql_connect("localhost","username","password")
or die(mysql_error());
mysql_select_db("first",$account);
$sql ="SELECT * FROM test";
$result=mysql_query($sql,$account);
while($row=mysql_fetch_array($result)){
$Lo=$row['one'];
$Lat=$row['two'];
}
echo $Lo.'and '.$Lat.'<br>';
?>
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng('<?php echo $Lo; ?>','<?php echo $Lat; ?>');
function initialize()
{
var mapProp = {
center:myCenter,
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
So I finally did it :D . With help form various different sources and all! here us the complete code :
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<!-------- Customizable Css for Map ----------------------------->
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 500px; height: 300px; border: 0px; padding: 0px; }
</style>
<!---------------- Java Scripts for Map ----------------->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDzaa4MZ7r4s26i54PwErpKTynKAaWVxTc&v=3&language=en"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!------------- Java Scripts for Map ------------------->
<script type="text/javascript">
var marker;
var map = null;
var markersArray = [];
//--------------------- Sample code written by vIr ------------
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
marker = new google.maps.Marker({
position: pt,
draggable: true,
raiseOnDrag: true,
icon: icon,
map: map
});
markersArray.push(marker);
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
setInterval(function mapload(){
$.ajax({
type: "POST",
url: 'location.php',
// data: form_data,
success: function(data)
{
// var json_obj = $.parseJSON(data);//parse JSON
var json_obj = jQuery.parseJSON(JSON.stringify(data));
for (var i in json_obj)
{ addMarker(json_obj[i].u_lat, json_obj[i].u_lon,"Longitude:" + json_obj[i].u_lon + "<br>" + json_obj[i].u_email + "<br>" + json_obj[i].u_name);
}
},
dataType: "json"//set to JSON
})
},3000);
center = bounds.getCenter();
map.fitBounds(bounds);
}
setInterval(function removeMarker() {
if (markersArray) {
for (i=0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
marker=null;
}
markersArray.length = 0;
}
},3000);
</script>
</head>
<body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
and the database related page :
<?php
$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
$data = array();
$result = mysql_query("SELECT * FROM users")or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
$data[] = $row;
}
echo json_encode($data);
//echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
?>
i trying to display many markers on google map.all works fine in too cases
i display ONE marker
i write the GPS localisations of different markers
i have a data base which contains Longitude,latitude values
i want to dispaly those values as markers on my map
here is a try but is not working,plz help me i spend all day already :/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<? php
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var listedespoints=[
<? php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
1) As #mauno-v told you use liste_des_points instead of listedespoints to loop.
2) In your loop you use the secnd and third entry liste_des_points[i][1], liste_des_points[i][2] while you only create two entries.
3) in you click event you use locations[i][0] where locations is not defined.
So create a list with three entries ['location name','latitude','longitude'] or change your indices and variable names.
See below:
<?
error_reporting(E_ALL);
ini_set('error_reporting','on');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<?php
/*$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);*/
$listeDesPoints='[\'Location 1\',47.45,2],[\'Location 2\',47.46,1.6],[\'Location 2\',47.47,1]';
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var liste_des_points=[
<?php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(liste_des_points[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
This the link of my code visit https://www.dropbox.com/s/1j0qc2uyp8vm9xj/map_user.php, this code is not working. I used JSON to get the array of data in mysql then echo it to javascript but when I try to run it I only see a gray map. Can anyone help me?
<?php
include('lock.php');
include('function/query.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>USER MAPS AND UPDATES</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<?php
$x = 0;
$query = "SELECT lat,lng FROM messages WHERE uid_fk='1'";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data[$x] = array("lat" => $row['lat'], "lng" => $row['lng']);
$x++;
}
?>
<script type="text/javascript">
var markers = <?php echo json_encode($data); ?>
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
initializeMaps();
</script>
</body>
</html>
I want to display the marker on the map but I can see only the first.
what is the problem?
while the marker did not show any
<?php
session_start();
//connessione al DB
include("dati_db.inc.php");
mysql_connect($host,$username,$password)or die("Connessione IMPOSSIBILE al DBMS. TIPO ERRORE:".mysql_error());
mysql_select_db($database)or die("IMPOSSIBILE selezionare il DataBase");
$idric=$_GET['id_ric']; //id richiesta
$sql = "SELECT * FROM richieste WHERE id=".$idric;
$dati=mysql_query($sql);
if (!$dati) {
echo "Query non eseguita correttamente sul DB(".$sql."): ".mysql_error();
exit;
}
$row=mysql_fetch_assoc($dati);
$luogo=$row['luogo'];
$indirizzo=$row['indirizzo'];
$descrizione=$row['descrizione'];
$oggetto=$row['oggetto'];
$indirizzogoogle=$luogo." , ".$indirizzo;
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalableo"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3: geocoding</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;}
#map { width:100%; height:95%; }
input { width:250px; }
#tooltip { padding:10px; text-align:left; }
#tooltip p { padding:0; margin:0 0 5px 0; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=it"></script>
<script type="text/javascript" src="inc/jquery-1.7.2.js"></script>
<script type="text/javascript" src="inc/myjs.js"></script>
<script type="text/javascript">
var createMap = function() {
//indirizzo ricavato in precedenza del luogo dell'intervento
var address = "<?php echo ($indirizzogoogle);?>";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': address}, function(results,status) {
if (status == google.maps.GeocoderStatus.OK) {
var options = {
zoom: 12,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker(
{
position: results[0].geometry.location,
map: map,
title: 'punto di intervento'
}
);
var tooltip = '<div id="tooltip">'+
'<p>Indirizzo punto di intervento<br>'+
results[0].formatted_address+'</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: tooltip
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
sedi = new Array();
dim=0;
//popoli vettore
<?php
//recupero info di tutte le sedi
$query="SELECT * FROM utenti WHERE tipo=3";
$query_sedi=mysql_query($query);
//per ogni record creiamo un MARKER
$contcs=mysql_num_rows($query_sedi);
if($contcs > 0){
//se ci sono records mostriamo tutte le sedi in un ciclo
while($line = mysql_fetch_array($dati, MYSQL_ASSOC)){
//recupero alcune informazioni
$sede = $line['sede'];
echo ("cod_indirizzi($sede);\n");
}
}
?>
} else {
alert("Problema nella ricerca dell'indirizzo: " + status);
}
});
};
function cod_indirizzi(indirizzo){
geocoder.geocode({'address':indirizzo}, function(result, status){
map.setCenter(result[0].geometry.location);
var marker= new google.maps.Marker
({map:map,
position:result[0].geometry.location,
title: indirizzo});
});
}
window.onload = createMap;
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
the map obtained there is only a marker, and you should see 3
what is the error?
Here is a similar script i have done may this help u
use jquery 1.2.6
(function() {
window.onload = function()
{
var ttl=["place1","place2","place3"];
var options = {
zoom: 13,
center: new google.maps.LatLng(28.550000, 77.22496000000001),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array that will contain the coordinates
var places = [];
places.push(new google.maps.LatLng(28.550392878584265, 77.25169658660889));
places.push(new google.maps.LatLng(28.546396951091907 , 77.19741940498352));
places.push(new google.maps.LatLng(28.528748, 77.219663));
// Looping through the places array
for (var i = 0; i < places.length; i++)
{
// Adding the marker as usual
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: ttl[i]
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'mouseover', function() {
var infowindow = new google.maps.InfoWindow({
content: '<div style="overflow:hidden;">'+ttl[i]+'</div>'
});
infowindow.open(map, marker);
setTimeout(function () { infowindow.close(); }, 5000);
});
})(i, marker);
}
}
})();
HTML
<div id="map"></div>
CSS
#map {
width: 400px;
height: 400px;
border: 4px solid #ccc;
}
I have data in mysql database and I want to be able to read that data in php array and use it for google geolocation.
So for this example I want to use only SELECT * statement, as I will not be bothering you with some parameters...
What I want to achieve is to get marked line from point A to point B ( depending where GPS location was saved )
This is the link what I want to have on my map: POLYLINE in this example there are only 4 data in the array I want to have it more.
So now we can get back to the code. This is my PHP script for connecting to mysql. I have been using mysqli as I will have stored procedures later one in the database, so don't get confused.
class dbMySql
{
static function Exec($query) {
// open database
$conn = mysqli_connect(
$GLOBALS['cfg_db_Server'],
$GLOBALS['cfg_db_User'],
$GLOBALS['cfg_db_Pass']
);
if($conn === false)
{
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,$GLOBALS['cfg_db_Name']);
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result)
{
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
mysqli_close($conn);
return $result;
}
}
How to connect this php script to code that is example on google API page, and insert my array values when button is clicked instead of the fixed ones:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>
EDIT:
this is what I get when I do your code:
EDIT2:
<!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=key&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, 180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [ <?php echo implode(',', $coordinates) ?> ];
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</script>
<?PHP
class dbMySql {
static function Exec($query) {
// open database
$conn = mysqli_connect('localhost','root','*****');
if($conn === false) {
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,'data_gps');
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result) {
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
mysqli_close($conn);
return $result;
}
}
$coordinates = array();
$result = dbMySql::Exec('SELECT lat,lng FROM data');
while ($row = mysqli_fetch_assoc($result))
$coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')' ;
?>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>
Im guessing that you need to iterate between the results and then echo them into the javascript.
Im assuming you have the lat and lng stored in your database.
$coordinates = array();
$result = dbMySql::Exec('SELECT lat, lng FROM table WHERE id = 1');
while ($row = mysqli_fetch_assoc($result))
$coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')';
And then on your javascript section
var flightPlanCoordinates = [ <?php echo implode(',', $coordinates) ?> ];
Edit:
<!DOCTYPE html>
<?PHP
class dbMySql {
static function Exec($query) {
// open database
$conn = mysqli_connect('localhost','root','*****');
if($conn === false) {
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,'data_gps');
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result) {
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
//mysqli_close($conn);
return $result;
}
}
$coordinates = array();
$result = dbMySql::Exec('SELECT lat,lng FROM data');
while ($row = mysqli_fetch_assoc($result))
$coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')';
?>
<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=key&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, 180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [<?php echo implode(',', $coordinates) ?>];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>