I am following the sample code from the Google Map API web page, which uses JavaScript and HTML. The HTML sample works fine, but using JavaScript source in JSP to create Google Maps doesn't work.
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
This is from their documentation. How do I use Google Api v3 in JSP Source?
If the code you have posted above is of the jsp you are talking about then you have missed to add the div with id 'map-canvas'. Try something like below.
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="height:300px; width:500px"></div>
</body>
</html>
To render map properly there must be an element to hold it and that element must have a definite height and width. I hope this helps
Related
I created a page with google maps and I need to print it, but a white line appears in the map in some coordinates of the map, not all the locations it appears.
Print
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Google Maps - Teste</title>
<!-- # CSS Imports # -->
<link href="css/site.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<!-- # Javascript Imports # -->
<script src="js/site.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOOGLEMAPS_API&callback=initMap"></script>
</body>
</html>
CSS Code (css/site.css):
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#media print {
img {
max-width: none !important;
}
}
Javascript Code (js/site.js):
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: -27.6301719,
lng: -49.0330395
},
mapTypeId: 'terrain'
});
}
EDIT 1:
I found a solution ... Instead of taking a screenshot of the div in question, use the Google Maps Static API, where you send some parameters and it returns an image ... BUUUUUT see edit 2...
https://developers.google.com/maps/documentation/static-maps/?hl=pt-br
EDIT 2:
The URL of google maps static is limited by 8192 chars, and i need draw ALOOOOT lines into maps... so... im back to the init...
[## Sorry my bad english :(]
I want to accept latitude and longitude from user and display it using javascript. I am using this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=ja"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
The page is loaded but doesnt show anything. Does it needs any javascript plugins. I googled but got only IDE to develop JavaScript projects. What if I want to use my existing IDE(ecllipse Juno).
You're missing the CSS. Add:
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
As per Google's example and it will work. Tested locally.
As you may see below, I created the function getChart();
It works when called by itself, but does not display the chart when I wrap it into $(document).ready(function(){...});
I also attached the file..
Any help is highly valued and appreciated.. thanx..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getChart(){
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
// Populate the data table.
var dataTable = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
// Draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));
chart.draw(dataTable, {legend:'none', width:600, height:400});
}
google.setOnLoadCallback(drawVisualization);
}
$(document).ready(function(){
$('#idbutton').click(function(){
getChart();
});
});
</script>
</head>
<body>
<input id="idbutton" type="button" value="button" />
<div id="visualization"></div>
</body>
</html>
Try to attach it to the window object.
Something like
$(document).ready(function(){
window.getChart = function() { //Code of getChart here };
});
And call it with:
$(document).ready(function(){
$('#idbutton').click(function(){
window.getChart();
});
});
Note: I did not test it.
visual studio pops up a notification saying "Microsoft JScript runtime error: 'initMap' is undefined" and points to the line below that contains "initMap();".
Notice, i've included a reference to the javascript file i'm using in the aspx page.
Error at: (this is from Default.aspx [dynamic] when debugging)
<script type="text/javascript">
//<![CDATA[
initMap();Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":4000,"uniqueID":"Timer1"}, null, null, $get("Timer1"));
});
//]]>
<
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (!ClientScript.IsStartupScriptRegistered("init"))
{
Page.ClientScript.RegisterStartupScript
(this.GetType(), "init", "initMap();", true);
//"<body onload="initialize()"> "
//"initialize();"
}
}
}
Default.aspx:
<%# Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="MyProject._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
......[some stuff here]
</style>
<title>Home Page</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true®ion=PK"></script>
<script type="text/javascript" src="defaultPage.js"></script>
</head>
<body>
<form id="form1" name="form1" runat="server">
..... [some stuff here]
</form>
</body>
</html>
My defaultPage.js file contains the following:
var geocoder;
var map;
var initialLocation = new google.maps.LatLng(24.828417, 67.038445);
var browserSupportFlag = new Boolean();
var markersArray = [];
images = new Object();
images.length = 99;
function initMap() {
....[some code here]
}
....
[more functions here]
I am new to JavaScript and here is a problem when I trying out prototype.
I want to update sample.jsp with Ajax.updater after the it is loaded, but it doesn't work. Here the source of smaple.jsp.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="prototype.js"></script>
<script>
function f1(){
var ajax = new Ajax.updater(
{success: 'state'},'part.html'
,{method:'get'});
}
document.observe('dom:loaded', function() {
f1();
});
</script>
</head>
<body>
state:
<div id="state"></div>
<br>
</body>
</html>
Could anyone tell me what's wrong with my code?
try "Ajax.Updater" (capital U) for starters
also I recommend that you try working with firefox and the firebug plugin, it's a great way to debug your javascript
I have tried another one and it works
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AJAX Zip Checker </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function checkZip() {
if($F('zip').length == 5) {
var url = 'checkzip.jsp';
var params = 'zip=' + $F('zip');
var ajax = new Ajax.Updater(
{success: 'zipResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F('zipResult') = "Error";
}
</script>
</head>
<body>
<label for="zip">zip:</label>
<input type="text" name="zip" id="zip" onkeyup="checkZip();" />
<div id="zipResult"></div><p/>
</body>
</html>
checkzip.jsp
<%
String zip = request.getParameter("zip");
if (zip.equals("10009")) {
%>
new york
<%} else {%>
unknown
<% }%>
Could anyone tell me the difference?