1

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>
1
  • Please describe the issue better. The map doesn't show? The inputs don't get updated? What is the problem? Any error in your javascript console?
    – MrUpsidown
    Apr 29, 2016 at 7:13

2 Answers 2

3

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>
2
  • Also I have an another question. How can I save selected coordinates. For example I move the marker a coordinate. I want to save in array or a div. İnfact I want to do visit history. Apr 29, 2016 at 7:51
  • Add a global array variable and push event.latLng.lat() & event.latLng.lng() to that array inside 'dragend' event.
    – sarath
    Apr 29, 2016 at 7:54
2

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>
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.