2013-06-07 18 views
5

ho provato ad usare questo codice:Come visualizzare google map sul mio sito dalla longitudine e latitudine

<img id="small-map" height="198" width="254" alt="Google Map" src="https://maps.google.com/maps?q=24.197611,120.780512" /> 

Ma non funziona nella pagina html.

Anche quando uso questo:

https://maps.google.com/maps?q=24.197611,120.780512 

funziona, ma solo come una pagina di Google

+0

Un blog dettagliata: http: //sforsuresh.in/display-google-map-locations-using-latitude-longitude/ –

risposta

12

ciao ecco il codice di esempio

<html> 
<head> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script language="javascript" type="text/javascript"> 

    var map; 
    var geocoder; 
    function InitializeMap() { 

     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = 
     { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true 
     }; 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
    } 

    function FindLocaiton() { 
     geocoder = new google.maps.Geocoder(); 
     InitializeMap(); 

     var address = document.getElementById("addressinput").value; 
     geocoder.geocode({ 'address': address }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 

      } 
      else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 

    } 


    function Button1_onclick() { 
     FindLocaiton(); 
    } 

    window.onload = InitializeMap; 

</script> 
</head> 
<body> 
<h2>Gecoding Demo JavaScript: </h2> 
<table> 
<tr> 
<td> 
    <input id="addressinput" type="text" style="width: 447px" /> 
</td> 
<td> 
    <input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /></td> 
</tr> 
<tr> 
<td colspan ="2"> 
<div id ="map" style="height: 253px" > 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html> 
+1

Grazie per il vostro aiuto! Funziona esattamente come volevo. – Sergey

2

È sufficiente creare link come:

"http://maps.google.com/?q=[lat],[long]" 

per maggiori dettagli: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

o per l'immagine statica, provate questo:

"http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap 
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false" 

per maggiori dettagli: https://developers.google.com/maps/documentation/staticmaps/

Problemi correlati