web-dev-qa-db-ja.com

Google Maps APIを使用して、map.setCenter関数を使用して現在の場所をデフォルトの設定場所として設定するにはどうすればよいですか？

Google Maps APIを使用してJavaScriptコードを記述しています。

map = new google.maps.Map2(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

上記のコードは、マップキャンバスのデフォルトの場所をパロアルトに設定します。

SetCenter関数がクライアントの現在の場所を自動的に指すようにスクリプトを作成するにはどうすればよいですか？

javascriptgoogle-mapsgeolocation
20
HVS

HTML5 GeoLocation APIは、それをサポートするブラウザーで使用できます。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  alert('geolocation not supported');
}

function success(position) {
  alert(position.coords.latitude + ', ' + position.coords.longitude);
}

function error(msg) {
  alert('error: ' + msg);
}
15
ceejayoz

私は2つの可能なオプションを考えることができます。

最初に GeoLocation API を ceejayoz推奨 として使用することを検討する必要があります。これは実装が非常に簡単で、完全にクライアント側のソリューションです。 GeoLocationを使用して地図を中央に配置するには、次を使用します。

_map.setCenter(new google.maps.LatLng(position.coords.latitude, 
                                     position.coords.longitude), 13);
_

... GeoLocationのsuccess()メソッドのgetCurrentPosition()コールバック内。

残念ながら、現在、GeoLocation APIをサポートしているブラウザはごくわずかです。したがって、 MaxMind's GeoLite City などのサービスを使用して、サーバー側のソリューションを使用してクライアントのIPアドレスをユーザーの場所に解決することも検討できます。次に、Google Maps APIを使用して、ブラウザー内でユーザーの都市と国をジオコーディングするだけです。以下は簡単な例です。

_<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Geocoding Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark) {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
             map.addOverlay(new GMarker(bounds.getCenter()));
          }
       });
    }
    </script> 
  </body> 
</html>
_

_userLocation = 'London, UK'_をサーバー側の解決済みアドレスに置き換えるだけです。以下は、上記の例のスクリーンショットです。

Render google map in based on selected location

map.addOverlay(new GMarker(bounds.getCenter()));行を削除することにより、マーカーを削除できます。

10
Daniel Vassallo

それは既にGoogle APIに存在します：

if (GBrowserIsCompatible()) 
{   
    var map = new google.maps.Map2(document.getElementById("mapdiv"));

    if (google.loader.ClientLocation) 
    {        
        var center = new google.maps.LatLng(
            google.loader.ClientLocation.latitude,
            google.loader.ClientLocation.longitude
        );
        var zoom = 8;

        map.setCenter(center, zoom);
    }
}

同じ質問のスレッドがいくつかあります...

8
Txugo

このソリューションは、最初にブラウザからユーザーの場所を取得しようとします。ユーザーが拒否した場合、またはその他のエラーが発生した場合、ユーザーのIPアドレスから場所を取得します

mapUserLocation = () => {
  navigator.geolocation
    ? navigator.geolocation.getCurrentPosition(
        handlePosition,
        getLocationFromIP
      )
    : getLocationFromIP();
};

getLocationFromIP = () => {
  fetch("http://ip-api.com/json")
    .then(response => response.json())
    .then(data => {
      data.lat &&
        data.lon &&
        updateUserPosition({
          lat: data.lat,
          lng: data.lon
        });
    })
    .catch(error => {
      console.log(`Request failed: `, error);
    });
};

handlePosition = position => {
  const userPos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  updateUserPosition(userPos);
};

updateUserPosition = position => {
  map.setCenter(position, 13);
};

次のように呼び出します：

mapUserLocation();
1
Mas

@ceejayozの回答の更新版：

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        alert('geolocation not supported');
    }
    function error(msg) {
        alert('error: ' + msg);
    }
    function success(position) {

        var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var mapOptions = {
            zoom: 12,
            center: myLatlng,
            scaleControl: false,
            draggable: false,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false
        }


        map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Main map',
            icon: iconBase + 'arrow.png'
        });
    }
0
user1012181