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.
Related
I'm using mapbox to make a map. I don't know if my map is being rendered or not cause the only i could see on the screen is the pointer and i can't even open the console to read the mistake. Please help me to find out if there's anything wrong with my codes! Thank you so much:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<title>Document</title>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="main.js"></script>
</body>
</html>
My JS:
mapboxgl.accessToken = 'pk.eyJ1IjoiZGh0NzZkeThjIiwiYSI6ImNrdjd0Zm92cDF4aGMyb2wwenhtbWJidjUifQ.KUBtTY1kI2SOMFXkKeerWQ';
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {
enableHighAccuracy: true
})
function successLocation(position) {
console.log(position)
setupMap([position.coords.longtitude, position.coords.latitude])
}
function errorLocation() {
}
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: center
});
}
I am developing a web page showing google map. In the map having a marker. It cannot be dragable. It is fixed in center of the map. Now i want the longitude and lattitude of the marker where placed. The map draggable. when changing places of marker position then i want to get exact longitude and lattitude. I have used the below code but is not working and not showing error.
google.maps.event.addListener(marker, 'dragend', function(a) {
console.log(a);
});
The full code is
map.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
</head>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
//do something onclick
.click(function(){
var that=$(this);
if(!that.data('win')){
that.data('win',new google.maps.InfoWindow({content:'this is the center'}));
that.data('win').bindTo('position',map,'center');
}
that.data('win').open(map);
});
}
var marker = new google.maps.Marker({
});
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'dragend', function(a) {
console.log(a);
});
</script>
<body>
<div id="map_canvas"></div>
<style>
body,html,#map_canvas{height:100%;margin:0;}
#map_canvas .centerMarker{
position:absolute;
/*url of the marker*/
background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
/*center the marker*/
top:50%;left:50%;
z-index:1;
/*fix offset when needed*/
margin-left:-10px;
margin-top:-34px;
/*size of the image*/
height:34px;
width:20px;
cursor:pointer;
}
</style>
</body>
</html>
How to solve the issue. Please help me.
You can listen for 'center_changed' event directly on map object and then read center coordinates with getCenter() method:
google.maps.event.addListener(map, 'center_changed', function(a) {
var cx = map.getCenter();
console.log('center_changed', cx.lat(),cx.lng());
});
Update: cx is LatLng object, see https://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLng
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 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
Having a bit of trouble placing a map within data-role="content" while using Google Maps v3 and JQuery. No errors show in the console so I am having a hard time debugging. No map shows up on the screen.
Here are my two files:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="js/mapload.js"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
mapload.js
function initialize()
var mapOptions = {
center: new google.maps.LatLng(49,-8),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This gave me some insight but didn't complete answer my question.
EDIT: SOLUTION
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={REPLACE THE BRACKETS AND THIS TEXT WITH YOUR API KEY}&sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<script type="text/javascript">
$(document).on('pageinit', '#index',function(e,data){
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(11.618044,-34.823347),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content" style="padding:0;position:absolute;top:40px;right:0;bottom:40px;left:0;">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
There's only one available way of using Google maps with jQuery Mobile. Because jQuery Mobile is specific window load can't be used to initialize the map.
Specifically correct height is needed to initialize the map successfully and it can ONLY be done during the jQuery Mobile pageshow page event. If you want to find out more about jQuery Mobile page events and why is pageshow event important for plugin initialization take a look at my private blog ARTICLE. Or you can find it HERE.
Let me make this story short, here's a working example: http://jsfiddle.net/Gajotres/pkZHg/
And here's a javascript and CSS used:
Javascript
$(document).on('pageinit', '#index',function(e,data){
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(42.618044,-87.823347),
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
CSS
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
load mapload.js at the end of the html
<div data-role="page" id="map">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="map-canvas"></div>
</div>
</div>
<script type="text/javascript" src="js/mapload.js"></script>
the DOM is not ready yet when you are calling the map functions
the other error might be CSS styling.. you could try this
a set width and height
`
#map-canvas {
width: 480px;
height: 640px;
}
`