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>
Related
I have posted my code but map is not load.please suggestion to this question.
i will also use google map js but can't load.
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap">
if($('.map-container:visible').length >= 0)
{
initMap();
}
function initMap(){
google.maps.visualRefresh = true;
var myLatlng = new google.maps.LatLng('24.980832' ,'55.092480');
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('dubaiTradeNew'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Dubai Trade'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
Please try adding height width once
<div class="map-container" id="dubaiTradeNew" style="height:100px;width:100px">
</div>
And Set different scripts
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
//Code here
</script>
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>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
I am using the above code to insert Google maps in my website. It is showing the place but I want to insert a pointer or marker to be there in a specific address. Can I get some help in regarding how to insert it?
Use the google.maps.Marker constructor with a lat/long, map and title.
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
https://developers.google.com/maps/documentation/javascript/markers
I have the following code:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="row">
<div class="col-md-6" id="googleMap" style="height:500px;"></div>
</div>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(44.6656, -83.5753),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap")
,mapProp);
var marker = new google.maps.Marker({
position: mapProp,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The map displays fine but I can't add the marker. I get the following error:
setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
I don't see how the latitude and longitude could be invalid because the resulting generated map shows the correct location. But no marker.
The marker's position property should be of the type LatLng:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="row">
<div class="col-md-6" id="googleMap" style="height:500px;"></div>
</div>
<script>
function initialize() {
var cord = new google.maps.LatLng(41.6656, -83.5753);
var mapProp = {
center: cord,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap")
,mapProp);
var marker = new google.maps.Marker({
position: cord,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
http://jsfiddle.net/5am3V/
I have a Google maps that plot multiple markers i need to have click events for the markers to display the pop ups, which the following code does with info window but i want to use Jquery ui pop dialog instead of the info window. the pop up must display info from a div that has style property displayed to None can someone assist with that pls im struggling.
enter code here
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
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);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
$("#mypopup").dialog();
//infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<div id="mypopup" style="display:none"> <div>
</body>
</html>
Try this: http://jsfiddle.net/lotusgodkk/x8dSP/3525/
JS:
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
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);
var infowindow = new google.maps.InfoWindow({
content: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function () {
console.log('clicked')
//$("#mypopup").dialog();
var dialog = $("#mypopup").dialog({
buttons: {
"Yes": function () {
alert('you chose yes');
},
"No": function () {
alert('you chose no');
},
"Cancel": function () {
dialog.dialog('close');
}
}
});
//infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML:
<div id="googleMap"></div>
<div id="mypopup">Hello</div>
CSS:
#googleMap {
height: 380px;
width: 500px;
}
#mypopup {
display:none;
}