When I run my code, the map doesn't display. I am working on my localhost. I want to put lat and lng to inputs. Then when I change the lat and lng the inputs will change dynamically. How can I solve this problem?
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});
marker.addListener('dragend',function(event) {
$('#lat').val() = event.latLng.lat();
$('#lng').val() = event.latLng.lng();
});}
</script>
</body></html>
You have some bugs in your code.. and you are not calling the function
initialize(). Try this updated code
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41,28);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
}
initialize();
</script>
</body></html>
Here I can save selected coordinates. İt may help someone.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<p id="results">result</p>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41.015137,28.979530);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var coords = [];
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
});
marker.addListener('dragend',function(event) {
$('#lat').val(event.latLng.lat()) ;
$('#lng').val(event.latLng.lng()) ;
coords.push(event.latLng.lat());
coords.push(event.latLng.lng());
$("#results").append('<div>'+JSON.stringify(coords)+'</div>');
coords = [];
});
}
initialize();
</script>
</body></html>
Related
I want to get the Marker position afer dragging it. Using AppInventor to get the position from the Java Script via setWebViewString function. The map and the drag of the marker are working fine. But the App on AppInventor is not receiving the position from the WebViewer, the WebViewString has no content.
I guess the problem is in this part of the code:
google.maps.event.addListener(marker, 'dragend', function() {
windowAppInventor.setWebViewString(marker.getPosition());
});
Please, can someone review that?
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center: myCenter,
zoom:15,
panControl:false,
zoomControl:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
draggable:true,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'dragend', function() {
windowAppInventor.setWebViewString(marker.getPosition());
});
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;margin:-8px"></div>
</body>
</html>
Follow the corrected code:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center: myCenter,
zoom:15,
panControl:false,
zoomControl:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
draggable:true,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'dragend', function(event) {
window.AppInventor.setWebViewString("Lat: " + marker.getPosition().lat().toFixed(6) + " Long: " + marker.getPosition().lng().toFixed(6));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;margin:-8px"></div>
</body>
</html>
Can anyone please tell me what is wrong with this code? The map loads but a user's click action does not open up the info_window or re-center the map to the clicked point.
I want the address of a location to pop-up as an info_window whenever the user clicks on a map.
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
height: 60%; width: 60%
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=MY_KEY&sensor=true">
</script>
<script type="text/javascript">
var geocoder;
var map;
var info_win;
var pos;
var marker;
function initialize()
{
google.maps.visualRefresh = true;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(evt) {
pos = evt.latLng;
map.setCenter(pos);
geocoder.geocode({'location': pos}, function(results, status)
{
if(status == google.maps.GeocoderStatus.OK)
{
marker = new google.maps.Marker
({
map: map,
position: pos
});
info_win = new google.maps.InfoWindow
({
content: results[0].formatted_address,
});
info_win.open(map,marker);
}
else
{
alert("Could not load");
}
});
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
First problem: You are adding the click listener to the map outside of the initialize function, so it is being added before the map is initialized:
<script type="text/javascript">
var geocoder;
var map;
var info_win;
var pos;
var marker;
function initialize()
{
google.maps.visualRefresh = true;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function() {
pos = map.getPosition();
map.setCenter(pos);
geocoder.geocode({'location': pos}, function(results, status)
{
marker = new google.maps.Marker
({
map: map,
position: pos
});
info_win = new google.maps.InfoWindow
({
content: results[0].formatted_address,
});
infowindow.open(map,marker);
});
});
}
</script>
After that you will find that a google.maps.Map object does not have a getPosition method. It does have a getCenter method, but you probably want to use the latLng property of the click event instead.
google.maps.event.addListener(map, 'click', function(evt) {
pos = evt.latLng;
map.setCenter(pos);
And fix the code that opens the info_win to open the google.maps.InfoWindow that you created:
info_win = new google.maps.InfoWindow
({
content: results[0].formatted_address,
});
info_win.open(map,marker);
Can you please take a look at following link and let me know why this google map working neither on my computer not on jsfiddle. I just got the code from [Google Maps API. Do I have to add something more to that?
As I said i tried both on my computer and on jsfiddle site with this link
Thanks for you comments and help
3]2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overlays within Street View</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);
function initialize() {
// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Setup the markers on the map
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: bank,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: busStop,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left:-100px">
<input type="button" value="Toggle Street View" onclick="toggleStreetView();"> </input>
</div>
<div id="map-canvas"></div>
</body>
</html>
You need to set a height and width for the map-canvas. I've cleaned up the code some and it should be working here: http://jsfiddle.net/Zuds3/3/
HTML
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
<div id="panel" style="margin-left:-100px">
<input type="button" value="Toggle Street View" onclick = "toggleStreetView();" ></input>
</div>
<div id="map-canvas"></div>
CSS
#map-canvas{
height: 400px;
width: 400px;
}
JavaScript
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);
function initialize() {
// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Setup the markers on the map
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: bank,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: busStop,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
I am using the below javascript code to show map and marker.The marker is loading while map load,but i want to load the marker if the button named "Add marker" is clicked.The marker should points to the current location.How to do this here.
js.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
html
<div id="mapCanvas"></div>
Thanks
please try this. hope it help.
1. make map as global variable.
2. initialize map
3. add marker on button click event.
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
jQuery("$addmarker").click(function(){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
title: 'Marker',
map: map,
draggable: true
});
})
</script>
Here is my complete sample code.
<script type="text/javascript">
var map;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng('23.11', '71.00'),
zoom: 2,
scrollwheel: false,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
function addMarker()
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map,
});
}
</script>
</HEAD>
<BODY onload="initialize();">
<div id="map_canvas" style="width:700px; height:500px;"></div>
<input type="button" id="addMarker" value="addMarker" onclick="addMarker();"/>
</BODY>
</HTML>
data is array which contains lat and lng
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map
});
You need to put the part:
var marker = new google.maps.Marker({
[...]
});
inside a onclick event listener.
The jQuery way to do this with a button element:
$('button').on('click', function() {
var marker = new google.maps.Marker({
[...]
});
});
You have to think about making the variables map and latLng global.
var map; // Declare map as global.
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// Call addMarker on click of the button.
function addMarker(){
var latLng = new google.maps.LatLng(-29.3456, 151.4346); // Put lat long as desired.
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
}
My assignment asks to place multiple markers on the map based on an xml document that we need to parse. I've done the parsing, but I'm having from trouble figuring out how to put the lat and long elements into the new marker object. My code:
function loadPoint(){
// var newHTML= "<div style=\"padding:5px;border:solid 1px red\">";
// new_lat = escapeText($(this).find("latitude").number();
// new_long = escapeText($(this).find("longitude"));
// newHTML += new_lat + "," + new_long;
// newHTML += "</div>";
// $("body").append(newHTML);
var latlong= new google.maps.LatLng($(this).find("latitude"),$(this).find("longitude"));
var marker = new google.maps.Marker({
map: map,
position: latlong
})
}
function parser(data) {
$(data).find("item title").each(loadDescription);
$(data).find("item latitude").each(loadLat);
$(data).find("item longitude").each(loadLong);
$(data).find("item").each(loadPoint);
}
function myBadLoadFunction(myXMLHttpRequest,myErrorMessage,myErrorThrown) {
alert('status: ' + myErrorMessage + '\n' + myXMLHttpRequest.responseText);
}
var map;
var centerPoint = new google.maps.LatLng(53.608803,-1.497327);
function initializeMap(){
var myOptions = {
zoom: 8,
center: centerPoint,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas').get(0), myOptions);
In my head this makes sense...putting the parsed data as the params for creating a new latlng, but it does nothing so..
Try arranging your declarations first.
var map; //declare it here
function initialize(){
var centerPoint = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: centerPoint
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
function loadPoint(){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</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>
<script type="text/javascript">
var locations = [
[-33.890542, 151.274856],
[-33.923036, 151.259052],
[-34.028249, 151.157507],
[-33.80010128657071, 151.28747820854187],
[-33.950198, 151.259302]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
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>