Googleマップ、Javaスクリプト、地図上に2番目のアドレスを追加

-2

私は緯度の代わりに住所を入れて地図に表示し、その部分はうまく機能しています。住所はですが、私は私のknowlodgeとコーディングすることができます。助けてください。Googleマップ、Javaスクリプト、地図上に2番目のアドレスを追加

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var geocoder; 
    var map; 
    var address ="UNIT 1A LOWER TINAHISK SOUTH QUAY ARKLOW co.wicklow"; 
    var addresss ="UNIT 4 INDUSTRIAL ESTATE DONORE ROAD DROGHEDA CO LOUTH"; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 9, 
     center: latlng, 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    if (geocoder) { 
     geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { 
      map.setCenter(results[0].geometry.location); 

      var infowindow = new google.maps.InfoWindow(
       { content: '<b>'+address+'</b>', 
       size: new google.maps.Size(150,50) 
       }); 

      var marker = new google.maps.Marker({ 
       position: results[0].geometry.location, 
       map: map, 
       title:address 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
      }); 

      } else { 
      alert("No results found"); 
      } 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
     }); 
    } 
    } 
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 
    </body> 
</html>

出典

2017-04-26 Rolandas Vizbara

この質問は、Javaとは何の関係もありません。それは、Car is to Carpetと同様、Javascriptに似ています。 –

@JoeC申し訳ありませんが、右の –

は、 'address'だけをジオコードするときに、ジオコードする各アドレスをジオコードする関数を呼び出す必要があります。 –

各アドレスに配列を入れ、各項目にジオコードを実行します。

Working example here

<script type="text/javascript"> 
var geocoder; 
    var map; 

    var addresses = [ 
    "UNIT 1A LOWER TINAHISK SOUTH QUAY ARKLOW co.wicklow", 
    "UNIT 4 INDUSTRIAL ESTATE DONORE ROAD DROGHEDA CO LOUTH" 
    ] 

function initialize() { 

geocoder = new google.maps.Geocoder(); 

var latlng = new google.maps.LatLng(-34.397, 150.644); 

var myOptions = { 
    zoom: 9, 
    center: latlng, 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

// Geocode each address 
addresses.forEach(function(address) { 
    geocode(address) 
}); 
} 

// Function to geocode addresses 
function geocode(address) { 
if (geocoder) { 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { 

     map.setCenter(results[0].geometry.location); 

     var infowindow = new google.maps.InfoWindow(
      { content: '<b>'+address+'</b>', 
      size: new google.maps.Size(150,50) 
      } 
     ); 

     var marker = new google.maps.Marker({ 
      position: results[0].geometry.location, 
      map: map, 
      title:address 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,marker); 
     }); 

     } else { 
     alert("No results found"); 
     } 

    } else { 

     alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
} 
} 
</script> 
<div id="map_canvas" style="width:750px; height:750px"> 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>

出典

2017-04-27 09:20:37

Paul、素晴らしい作品です、ありがとう！ –

Googleマップ、Javaスクリプト、地図上に2番目のアドレスを追加

答えて

関連する問題