Создание googleMap по местоположению

Question

Как новобранец с использованием API JavaScript JavaScript .. Я должен спросить об этом!

Я попытался найти некоторую информацию об этом, но я этого не сделал ... Я знаю, что мы можем создавать карты по длинным/латским и многим другим типам, но мне нужно создать карту по месту:

Я хочу указать на Exemple: Барселона, Пасео-де-Грасия, 32

Его жизнеспособными, чтобы создать карту, используя и указывая это место как центр? Cecause У меня нет почтовый индекс ... или мне действительно нужно его проконсультироваться с API?

действительно спасибо!

Answer 1

Вызов этот адрес с адресом В параметре https://maps.googleapis.com/maps/api/geocode/json?address=Barcelona,+Passeig+de+gracia,+32&key=YOUR_GOOGLE_API_KEY получается, что JSON

{ 
"results" : [ 
{ 
    "address_components" : [ 
    { 
     "long_name" : "32", 
     "short_name" : "32", 
     "types" : [ "street_number" ] 
    }, 
    { 
     "long_name" : "Passeig de Gràcia", 
     "short_name" : "Passeig de Gràcia", 
     "types" : [ "route" ] 
    }, 
    { 
     "long_name" : "Barcelona", 
     "short_name" : "Barcelona", 
     "types" : [ "locality", "political" ] 
    }, 
    { 
     "long_name" : "Barcelona", 
     "short_name" : "Barcelona", 
     "types" : [ "administrative_area_level_2", "political" ] 
    }, 
    { 
     "long_name" : "Catalunya", 
     "short_name" : "CT", 
     "types" : [ "administrative_area_level_1", "political" ] 
    }, 
    { 
     "long_name" : "España", 
     "short_name" : "ES", 
     "types" : [ "country", "political" ] 
    }, 
    { 
     "long_name" : "08007", 
     "short_name" : "08007", 
     "types" : [ "postal_code" ] 
    } 
    ], 
    "formatted_address" : "Passeig de Gràcia, 32, 08007 Barcelona, Barcelona, España", 
    "geometry" : { 
    "location" : { 
     "lat" : 41.3907821, 
     "lng" : 2.1672485 
    }, 
    "location_type" : "ROOFTOP", 
    "viewport" : { 
     "northeast" : { 
     "lat" : 41.39213108029149, 
     "lng" : 2.168597480291502 
     }, 
     "southwest" : { 
     "lat" : 41.38943311970849, 
     "lng" : 2.165899519708498 
     } 
    } 
    }, 
    "place_id" : "ChIJlyIRgPKipBIRd60v8v6Vc_Y", 
    "types" : [ "street_address" ] 
} 

], "Статус": "OK" }

Вызов этой функции и установите широты и LNG с новыми значениями, может создать компонент карты с центром в этом месте.

function initMap() { 
    // Create a map object and specify the DOM element for display. 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     scrollwheel: false, 
     zoom: 8 
    }); 
} 

в HTML файл

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

Answer 2

2 решения:

1: Создать временный (невидимый) карту, сделать поиск "Барселона Пасео-де-Грасиа, 32" и использования вернул lat/lng для создания и создания новой карты.

<div id="tmpMap" style="display: none; width: 0; height: 0;"></div> 
<div id="realMap"></div> 

<script> 
var map = new google.maps.Map(document.getElementById('tmpMap'), { 
    center: {lat: 0, lng: 0}, 
    zoom: 15 
}); 
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({address: 'Barcelona, Passeig de gracia, 32'}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
    latlng = results[0].geometry.location; 
    var map = new google.maps.Map(document.getElementById('realMap'), { 
     center: results[0].geometry.location, 
     zoom: 15 
    }); 
    } else { 
    alert('Geocode was not successful for the following reason: ' + status); 
    } 
}); 
</script> 

2: Создание карты без первоначального места, сделать поиск «Барселона Пасео-де-Грасиа, 32» и показать его на карте.

<div id="map" style="display: none;"></div> 

<script> 
var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 0, lng: 0}, 
    zoom: 15 
}); 
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({address: 'Barcelona, Passeig de gracia, 32'}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
    map.setCenter(results[0].geometry.location); 
    } else { 
    alert('Geocode was not successful for the following reason: ' + status); 
    } 
}); 
</script>