2016-04-22 5 views
0

私は検索フォームを持ち、ユーザーが郵便番号を入力できるようにして、その郵便番号の緯度と経度の値を返すだけでなく、地図上にそれを特定します。どのようにマップを取り除き、ページに緯度と経度の値だけを表示させるには?私は、マップとは何かを考えていたものを消してみましたが、完全に機能しなかったので、誰かが私を助けてくれることを願っています!このコードで地図を削除するにはどうすればよいですか?

コード:

<style type="text/css"> 
    #map 
    { 
    height:400px; 
    width:400px; 
    display:block; 
    } 
</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-API"></script> 
<script type="text/javascript"> 

    function getPosition(callback) { 
    //set up our geoCoder 
    var geocoder = new google.maps.Geocoder(); 

    //get our postcode value 
    var postcode = document.getElementById("postcode-bar").value; 

    //send value to google to get a longitude and latitude value 
    geocoder.geocode({'address': postcode}, function(results, status) { 

     //callback with a status and result 
     if (status == google.maps.GeocoderStatus.OK) { 
     //send the values back in a JSON string 
     callback({ 
      latt: results[0].geometry.location.lat(), 
      long: results[0].geometry.location.lng() 
     }); 
     } 
    }); 
    } 
function setup_map(latitude, longitude) { 

    //create a JSON object with the values to mark the position 
    var _position = { lat: latitude, lng: longitude}; 

    //add our default mapOptions 
    var mapOptions = { 
     zoom: 16    //zoom level of the map 
     center: _position  //position to center 
    } 

    //load a map within the "map" div and display 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

    //add a marker to the map with the position of the longitude and latitude 
    var marker = new google.maps.Marker({ 
     position: mapOptions.center, 
     map: map 
    }); 
} 
window.onload = function() { 

    //first setup the map, with our default location of London 
    setup_map(51.5073509, -0.12775829999998223); 

    document.getElementById("form").onsubmit = function() { 

     //when form is submitted, wait for a callback with the longitude and latitude values 
     getPosition(function(position){ 

     //log the position returned 
     var text = document.getElementById("text") 
     text.innerHTML = "Marker position: { Longitude: "+position.long+ ", Latitude:"+position.latt+" }"; 

     //update the map with the new position 
     setup_map(position.latt, position.long); 
     }); 
    } 
} 

</script> 

</head> 
<body> 


<div id="postcode-search" class="input-group"> 

    <form action="javascript:void(0)" id="form"> 

    <input id="postcode-bar" class="form-control" placeholder="Enter your postcode" type="text"></input> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" id="postcode-btn" type="button">Go</button> 
    </span> 

    </form> 

</div> 

<div id="map"></div> 
<div id="text"></div> 

+0

..あなたは、機能を削除することができますが、あなたがそれを必要とする可能性がある場合、あなたは知っていることはありません。 'Uncaught SyntaxError:Unexpected identifier' – geocodezip

+0

あなたは私のAPIにアクセスすることができないので、私の質問に今答えるので、ありがとうございます。 –

答えて

1

setup_map()関数を実行しないでください。

window.onload = function() { 
    //first setup the map, with our default location of London 
    // setup_map(51.5073509, -0.12775829999998223); 

    document.getElementById("form").onsubmit = function() { 

     //when form is submitted, wait for a callback with the longitude and latitude values 
     getPosition(function(position){ 

     //log the position returned 
     var text = document.getElementById("text") 
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ", Latitude:"+position.latt+" }"; 


    //update the map with the new position 
    //setup_map(position.latt, position.long); 
    }); 
} 
} 

window.onload = function() { 

//first setup the map, with our default location of London 
setup_map(51.5073509, -0.12775829999998223); 

document.getElementById("form").onsubmit = function() { 

    //when form is submitted, wait for a callback with the longitude and latitude values 
    getPosition(function(position){ 

    //log the position returned 
    var text = document.getElementById("text") 
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ", Latitude:"+position.latt+" }"; 

    //update the map with the new position 
    setup_map(position.latt, position.long); 
    }); 
} 
} 

掲載のコードがあると動作しません

+0

素晴らしい作品です、ありがとうございます。 –

+0

私は私が助けることができて嬉しい:) – Filchev