How to get a geo location and show to the map

I have been trying to get a location address from a text box then get the latitude and longitude from the address and show the nearest train station from the address.

I can get the latitude and longitude of an address I also can show the nearest train stations from a specific latitude and longitude.

My problem is when I try to get the latitude and longitude form an address and put the address latitude and longitude to show the nearest train station, I failed.

Please find my code below(problem is in alert-)-

function initialize() { // start var latitude; var longitude; geocoder = new google.maps.Geocoder(); var address = document.getElementById('address').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 }); latitude = results[0].geometry.location.lat(); longitude = results[0].geometry.location.lng(); alert(longitude); } else { alert('Geocode was not successful for the following reason: ' + status); } }); alert(longitude); var pyrmont = new google.maps.LatLng(-37.8176108, 145.0422631); map = new google.maps.Map(document.getElementById('map-canvas'), { center: pyrmont, zoom: 15 }); var request = { location: pyrmont, radius: 1000, types: ['train_station', 'bus_station', 'subway_station', 'transit_station'] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.nearbySearch(request, callback); }

-------------Problems Reply------------

The issue is that geocoder.geocode runs asynchronously, you'll not be able to access the results before the callback has been called, so you should invoke the following (nearbySearch) in the callback.

Another problem: currently you'll not be able to geocode/search again without creating a new map(of course you may always create a new map by calling initialize again, but this will result in bad performance and will also increase the map-loads...which are limited).

a solution which separates the map-creation from the geocoding/search(wraps the address-field into a form, the geocoding/search will be invoked when the form will be submitted)

function initialize() {

"use strict";
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-37.8176108, 145.0422631),
zoom: 1
}),
field = document.getElementById('address'),
form = field.form,
marker = new google.maps.Marker(),
info = new google.maps.InfoWindow(),
//I use this object later to hide previously added markers
mvc = new google.maps.MVCObject(),
geocoder = new google.maps.Geocoder(),
service = new google.maps.places.PlacesService(map);

//use the field as control when you want to
map.controls[google.maps.ControlPosition.TOP_CENTER].push(form);

google.maps.event.addListener(marker, 'click', function() {
google.maps.event.trigger(info, 'open', this);
});

//this will open the infowindow for a clicked marker
//the infowindow-content will be retrieved from the
//content-property of the marker
google.maps.event.addListener(info, 'open', function(marker) {
this.setContent(marker.get('content'));
this.open(marker.getMap(), marker);
});

marker.bindTo('map', mvc, 'map');

//this separates the geocoding/places-search from the map-creation
//it will be executed when the form will be submitted
//(e.g. by hitting ENTER in the address-field)
google.maps.event.addDomListener(form, 'submit', function(e) {
if (e) e.preventDefault();

//this hides all markers and the infowindow
mvc.set('map', null);

if (field.value.match(/\S+/)) {
geocoder.geocode({
'address': field.value
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
mvc.set('map', map);
if (results[0].geometry.viewport) {
map.fitBounds(results[0].geometry.viewport);
} else {
map.setCenter(results[0].geometry.location);
}

marker.setValues({
position: results[0].geometry.location,
content: results[0].formatted_address
});

service.nearbySearch({
location: results[0].geometry.location,
radius: 1000,
types: ['train_station', 'bus_station', 'subway_station', 'transit_station']
}, function(places, status) {

if (status == google.maps.places.PlacesServiceStatus.OK) {

//will be used later to set the viewport
//so that it contains all markers
var b = new google.maps.LatLngBounds();

places.forEach(function(place, i) {

var m = new google.maps.Marker({
position: place.geometry.location,
icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
content: place.name
});

b.extend(place.geometry.location);
m.bindTo('map', mvc, 'map');

google.maps.event.addListener(m, 'map_changed', function() {
if (!this.getMap()) this.unbindAll();
});

google.maps.event.addListener(m, 'click', function() {
google.maps.event.trigger(info, 'open', this);
});

});

if (places.length > 1) {
map.fitBounds(b);
}
} else {
alert('NearbySearch was not successful for the following reason: ' + status);
}

});
} else {
alert('Geocoding was not successful for the following reason: ' + status);
}
});
}
return false;
});
//trigger form-submit for the initial search
google.maps.event.trigger(form, 'submit');

}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
#address {
width: 300px;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&v=3">
</script>
<div id="map-canvas"></div>
<form>
<input id="address" value="21 Elphin Grove, Hawthorn VIC 3122, Australia" placeholder="insert an address and hit ENTER" title="insert an address and hit ENTER"/>
</form>

Category:javascript Views:1 Time:2018-04-03

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.194 (s). 11 q(s)