The following code is from a page that is dedicated exclusively for uploading images on imgur.com. This is a model from the net and you can drag and drop images from your pc whit no problems. My question is: What code i need to add so that i can drag and drop images from another browser?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Upload</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>.
<style>
body {text-align: center; padding-top: 100px;}
div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
#link, p , div {display: none}
div {display: inline-block;}
.uploading div {display: none}
.uploaded div {display: none}
.uploading p {display: inline}
.uploaded #link {display: inline}
</style>
<script>
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {
if (!file || !file.type.match(/image.*/)) return;
document.body.className = "uploading";
var fd = new FormData();
fd.append("image", file);
fd.append("key", "myapicode");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json");
xhr.onload = function() {
document.querySelector("#link").href = JSON.parse(xhr.responseText).upload.links.imgur_page;
var test = JSON.parse(xhr.responseText).upload.links.imgur_page;
var dataString = 'content=' + test + '&page=something';
$.ajax({
type: "POST",
url: "upload.img.php",
data: dataString,
cache: false,
success: function(html){
}
});
document.body.className = "uploaded";
}
xhr.send(fd);
}
</script>
</head>
<body>
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<input style="visibility:collapse;width:0px;" type="file" onchange="upload(this.files[0])">
<p>Uploading...</p>
<a id="link">Its online!!!</a>
</body>
</html>
Not all browsers support this, but Firefox will let you drag an image out of the browser to another browser or your computer, while Chrome does not allow you to drag an image out of the browser.
This page has a so called dropzone, open it in Chrome and open an image in Firefox, and you can drag the image straight from Firefox to Chrome, however it does not seem to work the other way around.
The script is well commented and should give you some ideas, and the drag and drop stuff is basically set up like :
var dropzone;
dropzone = document.getElementById("dropzone");
dropzone.addEventListener("dragenter", dragin, false);
dropzone.addEventListener("dragleave", dragout, false);
dropzone.addEventListener("dragover", stopPropagation, false);
dropzone.addEventListener("drop", drop, false);
Where dragin, dragout, drop etc. are functions called on those events that you will find in the script.
Related
When I try to add a jQuery click animation to my submit button it starts the animation however, quickly resets because the form submits and refreshes the page. If the form is wrapped by a div, the animation works fine but then the form doesn't submit after the animation is complete. How can I have it submit the form after the animation has completed and keep the animation from reseting after form-submission. I'm new to PHP and jQuery and can't figure out how to do it. Here is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function() {
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"});
});
});
</script>
</head>
<body>
<?php
$username = "username";
$password = "password";
$host = "host";
$db = $username;
if(isset($_POST['PSol']))
{
$connection = mysqli_connect($host, $username, $password, $db);
$sql = "UPDATE table SET column='' WHERE id = 1";
if (mysqli_query($connection, $sql)) {
echo "Record successfully changed.";
}
else{
echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}
mysqli_close($connection);
echo "<p>Disconnected from server: ".$host."</p>";
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "post" class = "PSolCanvas">
<input type = "submit" name = "PSol" class = "PSol" value = "P"/>
</form>
</body>
</html>
You will want to try doing a callback on the animation so the submit will happen when it's done. Something like:
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function(e) {
// You will want to prevent the natural submission of the form
e.preventDefault();
// Notice the function attached to the `.animate()`.
// This will fire after the animation is done.
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
$('.PSolCanvas').submit();
});
});
});
</script>
EDIT: Here is an ajax version, I have made it a little complex because you may want to reuse the ajax elsewhere in your site, but you really only need the content inside the this.ajax part. The order of the script is important since this particular example calls itself (calling another page for the ajax would be better). Everything else (separating things into their own pages) is just suggestion:
/config.php
<?php
// Make some defines
define("DB_USERNAME",'username');
define("DB_PASSWORD",'password');
define("DB_HOST",'host');
define("DB_DATABASE",'database');
/functions/myfunctions.php
<?php
// Make some functions to make things cleaner/universal
function connection()
{
return mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
}
// Make a function that you can reuse
function updateTable($val,$con)
{
return (mysqli_query($con, "UPDATE table SET column='' WHERE id = {$val}"));
}
/index.php (whatever this page is called)
<?php
// Include above assets
require_once(__DIR__.'/config.php');
require_once(__DIR__.'/functions/myfunctions.php');
// This should run only on the ajax call
if(!empty($_POST['PSol'])) {
// Get the connection
$con = connection();
// Set common text
$disc = "<p>Disconnected from server: ".DB_HOST."</p>";
// Run the update
if(updateTable(1,$con))
// If success
$response = json_encode(array('msg'=>"Record successfully changed. {$disc}"));
else
// If fail
$response = json_encode(array('msg'=>"Error: {$sql}<br>".mysqli_error($con).$disc));
// Close connection
mysqli_close($con);
// Stop further processing of page
// If you don't stop processing, you will send back the rest of the
// page below and will malform your json
die($response);
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// This is an object to contain your ajax app
var AjaxEngine = function()
{
// Set some common containers
var url;
var useURL;
// This function will set where to point the ajax call
this.useUrl = function(url)
{
useURL = url;
return this;
}
// This is the actual jQuery ajax call
this.ajax = function(useData,func)
{
// Create jQuery ajax
$.ajax({
// Use our previously-set url
url: useURL,
// This is the data to send to our page
data: useData,
// Send the data by POST method
type: 'post',
// When the post is successful
success: function(response){
// Use an anonymous function
func(response);
}
});
}
}
$(".PSol").click(function(e) {
// Set the form
var thisForm = $('.PSolCanvas');
// Get the values from the form
var useData = thisForm.serialize();
// Stop from submission
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
// Create instance of our ajax object
var Ajaxer = new AjaxEngine();
// Set the url (in this case we are getting the action=""
// from the form tag)
// The "useData" param is the form data
// The second param is the function we want to run when
// the ajax successful
Ajaxer.useUrl(thisForm.attr('action')).ajax(useData,
function(response) {
// Try, just incase the code produces an error and
// malforms the json response
try {
// Parse the return json_encode()
var json = JSON.parse(response);
// Send the message to the container
$('#writespot').html(json.msg);
}
catch (Exception) {
// This will catch any error, so
// make sure your console is open to review
console.log(Exception.message);
console.log(response);
}
});
});
});
});
</script>
</head>
<body>
<!-- This is where the response message will be written to -->
<div id="writespot"></div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="PSolCanvas">
<input type="submit" name="PSol" value="P" class="PSol" />
<input type="hidden" name="PSol" value="P"/>
</form>
</body>
</html>
You want to submit the form after the animation has run. To do that you need to prevent the default 'submit' and then add your own using a callback function on the jQuery animate call.This will only call the .submit() after the animation has finished. Something like (Please note I haven't had a chance to check this code but it should give you the general idea:
$(document).ready(function(){
$(".PSol").click(function(e) {
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},
function() {
$("form").submit();
}
);
});
});
I am trying to figure out how to display an image while PHP runs and disappears after.
I grabbed this code from a site, but the image only shows very briefly at the very end of the PHP loading. It doesn't show when the page initially opens and it only seems to run once.
I have read many and many of websites and threads on here, but I can't figure out what is missing in this simple example. Is there a better way to do this? Or is this it and I just need to fix it?
THANK YOU in advance!
<html>
<head>
<title>Home</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_51.gif) center no-repeat #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
</head>
<body>
<div id="loader" class="se-pre-con"></div>
<?php
include 'content/screen.php';
?>
</body>
</html>
SOLVED! I found and modified this AJAX code that worked for exactly what I was looking for (same page load with multiple options on what to load (by links). Thanks for all of the helpful messages directing me on the right path! This community is awesome!
<head>
<title>Demo</title>
<style>
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
</style>
<script>
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax(page) {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "content/"+page+".php", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<div id="content">
Click to load page 1<br/><br/>
Click to load page 2<br/><br/>
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" src="loading.gif" />
</div>
</div>
</body>
</html>
It has all to do with the output buffering PHP applies.
This Stack Overflow link explains why it doesn't work as expected, a possible way to make it work and why you shouldn't make it work that way.
PHP always (unless specifically told not to) buffers the output before printing it. That means that when you actually print, PHP just stores the output text in the memory. After everything is printed, the contents stored in the memory gets printed and the memory gets flushed. It is not only PHP that does that. Almost all the I/O libraries across many languages and platforms has this feature, which is generally enabled by default.
Here is a relevant link that shows all the possible options to bypass or disable this feature. I personally think that you shouldn't disable it because the image will still need to be loaded and you won't be able to control the latency between PHP loading and image loading. I think in this situation maybe a solution that involved Ajax is more suitable for your needs.
Are you trying to show a loading animation/image for the PHP operation? If yes, then you should definitely do it with Ajax on a separate action.
Edit: sorry about not pasting the link: How to disable output buffering in PHP
Here's how to apply Show image while page is loading to your situation.
Replace your php tag with a div like this:
<div id="main"></div>
Then change your fadeout script like this:
<script>
$(document).ready(function() {
$("#main").load("content/screen.php", function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
});
</script>
In magento i have used videos instead of product images, this is a marketplace.there are four type of users in frontend
1. seller
2. corporate
3. business agent
4. website customer
Business Agent -> business agent provide all seller products to others website and if buying through other website he will get commision so i am giving and embedded code to business agento so they can implement this to others website but when i am trying to hit ajax from other domain it show cross domain error.
Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at http://shopahol.com/demo/test.php?atoken=c0Q5QUk1VUgreEk9.
(Reason: CORS header 'Access-Control-Allow-Origin' missing).
To resolve this issue i have tried to add Access-Control-Allow-Headers to index.php
header('Access-Control-Allow-Origin: *');
but problem not solved same error. then i have tried to put crossdomain.xml in my root folder
<!--l version="1.0-->
<!--pan class="hiddenSpellError" pre=-->
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
it also failed same issue can anyone have any solution or i doing something wrong.
this is my code to show video on others website. (simply html or php file)
<!-- html starts -->
<div id="tevid" style="width:100%;">
<video id="homevideo" width="100%" autoplay onended="run()"></video>
<div class="bg-background-new">
Product Name
<div class="price-new" id="price"></div>
Buy Now
</div>
</div>
<!-- javascript starts *Remove this script if you already included ajax jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" > </script>
<script>
var video_count =0;
var videoPlayer = document.getElementById("homevideo");
var allproduct = [];
function getvideos(){
$( document ).ready(function() {
$.ajax({
url: "http://shopahol.com/demo/test.php?atoken=c0Q5QUk1VUgreEk9",
type: "GET",
dataType: "json",
success: function(data){ for(var i in data) { allproduct.push(data[i]); } run(); },
error: function() { alert("Error During Process"); }
});
});
}
function run(){
var nextVideo = allproduct[video_count].videourl;
var price = allproduct[video_count].pric;
var name = allproduct[video_count].name;
var url = allproduct[video_count].url;
videoPlayer.src = nextVideo;
videoPlayer.play();
video_count++;
$("#price").html("$ "+price);
$("#product-name").html(name);
$("#product-name").attr("href", url)
$("#button1").attr("href", url)
if(allproduct.length == video_count){ video_count = 0; }
}
$( document ).ready(function() {
getvideos() ;
});
</script>
<!-- css starts -->
<style>
a.new-button {
background: red none repeat scroll 0 0;
border: medium none;
bottom: 0;
color: #fff;
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 10px;
padding: 10px 20px; float: right;
}
.price-new {
color: #000;
display: block;
float: right;
line-height: 35px;
padding: 10px;
}
a.product-name-new {
color: #000;
display: inline-block;
float: right;
line-height: 35px;
margin: 10px 0;
position: relative;
right: 2px;
text-decoration: none;
}
.bg-background-new {
background: transparent none repeat scroll 0 0;
bottom: 65px !important;
display: block;
position: relative;
right: 0 !important;
width: 99%;
}
</style>
in help appreciated
thanks in advance
I figure it out so i am posting answer for others help in same situation
I changed my ajax function
function getvideos(){
$( document ).ready(function() {
$.ajax({
url: "http://shopahol.com/demo/test.php?atoken=WkFBU2F6bFdCNFU9",
type: "GET",
crossDomain: true,
dataType: "jsonp",
jsonpCallback: 'giveBacktome',
error: function() { console.log("Error During Process"); }
});
});
}
it works
Resolve issue: CORS header, by adding either adding a rule to .htaccess or in apache/IIS etc (DevOps server configuration issue).
for example in .htaccess to allow all domains:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
or foo-domain.com:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "foo-domain.com"
</IfModule>
UPDATE CODE BELOW
I found some code that is able to upload an image and display its thumbnail. However, I would like to save the images to a particular folder as well.
What jQuery code or ajax code can I use to save the original image to a folder of my choice?
Here is the live demo: http://jsfiddle.net/dn9Sr/2/
Here is the full code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<style>
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline-block;
margin-top: 25px;
position: relative;
}
#preview_image {
display: none;
width: 90px;
height: 90px;
margin: 2px 0px 0px 5px;
border-radius: 10px;
}
.upload-file-container {
position: relative;
width: 100px;
height: 137px;
overflow: hidden;
background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container-text{
font-family: Arial, sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 35px;
}
.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
</style>
<script>
$( document ).ready(function() {
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
};
reader.readAsDataURL(input.files[0]);
}
}
$("#patient_pic").live("change",function(){
readURL(this, "#preview_image")
});
});
</script>
</head>
<body>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview_image" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="patient_pic" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
UPDATE: I think I am on the right track. I am close but I don't know what data to send from the jQuery. I added a php scrit and its getting a call back as success but I am not sending the right var. I think if I just send the right val I can get it.
CODE:
<script>
$( document ).ready(function() {
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
$.ajax({
type:'POST',
url: 'theUpload.php',
data: input.files[0],
success:function(data){
console.log("success");
console.log(data);
alert(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
};
reader.readAsDataURL(input.files[0]);
}
}
$("#patient_pic").live("change",function(){
readURL(this, "#preview_image")
});
});
</script>
Try this one.
Script:
function uploadFile(){
var input = document.getElementById("file");
file = input.files[0];
if(file != undefined){
formData= new FormData();
if(!!file.type.match(/image.*/)){
formData.append("image", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data){
alert('success');
}
});
}else{
alert('Not a valid image!');
}
}else{
alert('Input something!');
}
}
HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<input type="file" id="file" />
<button onclick="uploadFile();">Upload</button>
</body>
</html>
upload.php:
<?php
$dir = "image/";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir. $_FILES["image"]["name"]);
?>
John's answer is good but file = input.files[0] doesn't work for me
file = input[0].files[0]
works.
You need a server side language to store the uploaded image to specified folder. PHP is one of them, so I highly recommend to take a look of it.
AJAX is just for executing server side calls without refreshing the page.
So I've been working on including google maps in my webpage. I've already created it to work filling up 100% of the screen on its own html page. Now I wanna include the map to be smaller to fit in a in my web page. The include() functions work so on my web page I get the normal header and footer like expected. Only thing wrong is no map appears in the proper div I have set up for. Attatched is the javascript file that works and creates the map and the templated file that includes the header and footer and attempts to create the map.
//Create the function to initiaze the map
function initialize() {
//Map options must contain a center, an id, and a zoom
var mapOptions = {
center: new google.maps.LatLng(34.26, 27.19),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID,
//Don't want the user to be able to pan or zoom
disableDefaultUI:true
};
//Create a new instance of google maps inserting it into the id map-canvas and the map-options
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//Create a varaible to hold our coordinates for a marker
var trip1=new google.maps.LatLng(2.00,77.30);
var contentString='This is a sample window that can include clickable links to pictures and styled text for example';
var infowindow=new google.maps.InfoWindow({
content:contentString
});
//Create the google maps marker with the position as the the trip1 variable
var marker = new google.maps.Marker({
position: trip1,
title:'Ecuador',
map:map
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Now here's the php files for the website
<?php include('../includes/educateHeader.php');?>
<script type="text/javascript" charset="utf-8" src="map.js"></script>
<div class="bio">
<h1>About Us</h1>
</div>
<div id="map-canvas">
<h1>The Many Journeys of OEC</h1>
</div>
<?php include('../includes/educateFooter.php');?>
Also here's some of the css file in case, I wasn't sure
.bio{
color:white;
margin-top:20px;
margin-bottom:30px;
position:relative;
}
.bio h1{
text-align:center;
}
#map-canvas{
postion:relative;
margin-top:20px;
}
#map-canvas h1{
color:white;
text-align:center;
}
BODY{
margin-left:15%;
margin-right:15%;
background:url("umichBackground.jpg") no-repeat center center fixed;
margin-bottom:0%;
margin-top:0%;
background-size:cover;
-o-background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
height:100%;
}
HTML{
height:100%;
}
Something like..
#map-canvas {
width: 500px;
height: 500px;
}
?
You just need to put it inside of an element which has the height, width and location you desire. This line of JS below is what is actually putting the map inside a particular element on your page:
JS:
var map = new google.maps.Map(document.getElementById("myElement"), mapOptions);
HTML:
<div id="myElement"></div>
CSS:
#myElement {
width: 300px;
height: 300px;
}