What is the best way to obtain country name during creation of Google Map to update country name field in real time?
I create my Google Map with this code:
function createMap(address,distance){
address=$("#settingMeetingPrefs_meeting_city").val();
distance=$("#settingMeetingPrefs_meeting_distance").val();
var geocoder = new google.maps.Geocoder();
if (address == null)
var address = "{{city}}";
else
var address = address;
if (distance==null)
distance= "{{distance}}";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 7,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: distance * 1000 ,
// radius: document.getElementById('distance').value * 1000 , // 10 miles in metres
fillColor: '#0000FF'
});
circle.bindTo('center', marker, 'position');
}
});
}
The country is stored in the geocoding result address component.
To get the country you could do something like this
while (i<results[0].address_components.length){
if(results[0].address_components[i].types[0]=='country'){
console.log(results[0].address_components[i].short_name);
}
i++;
}//end while
more info here Geocoding Strategies
Related
google map marker not showing in bootstrap modal.
this is my jquery code :
function map_init() {
if(!$('body').data('map')){
var var_mapoptions = {
zoom: 6,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
};
$('body').data('map',new google.maps.Map($('<div id="map"/>')[0],
var_mapoptions));
}
return $('body').data('map');
}
var Lat;
var lon;
$(document).on('click','a[data-map]',function(){
var data=$(this).data('map'),
map=map_init();
var geocoder = new google.maps.Geocoder();
var address = data;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
}
Lat = latitude;
lon = longitude;
});
$('#map_modal')
.find('.modal-body')
.append(map.getDiv())
.end()
.find('.modal-title')
.text(data.Name)
.end()
.one('shown.bs.modal',function(){
google.maps.event.trigger(map, "resize");
map.setCenter({lat:Lat,lng:lon});
});
})
.modal('show');
});
it's showing modal , but not showing the map marker. the latitude and longitude values are came from php code( that is from while loop value).
I believe you did not created any Google Maps Javascript API Markers object.
A marker identifies a location on a map. By default, a marker uses a
standard image. Markers can display custom images, in which case they
are usually referred to as "icons."
I would suggest to edit and add this code inside this line:
if ( status == google.maps.GeocoderStatus.OK ) {
//add marker code here
}
code to be added:
var marker = new google.maps.Marker({
positions : new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng() ),
map: map,
title: 'I am a marker :)'
});
And your Marker will appear.
Im trying to use google maps api to convert my address to longitude and latitude and THEN display the map on the page.
Just a note im using PHP/Laravel to retrieve the address from the DB. So although its a hard coded value of new york that will be dynamic after i get this working.
Html
<div id="map" style="height:250px"></div>
Javascript
<script>
var geocoder = new google.maps.Geocoder();
var address = "new york";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
alert(latitude);
}
});
function initMap() {
var myLatLng = {lat: latitude, lng: longitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=keyremoved&callback=initMap">
</script>
At the moment i'm getting the error of "Uncaught ReferenceError: google is not defined"
Change the order of scripts
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=keyremoved&callback=initMap">
</script>
<script>
var geocoder = new google.maps.Geocoder();
var address = "new york";
// rest of the code
</script>
As mentioned above the code needed to be put inside of my callback function.
<script>
function initMap(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
}
console.log(latitude);
console.log(longitude);
var myLatLng = {lat: latitude, lng: longitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCY2buDtbYIot8Llm_FkQXHW36f0Cme6TI&callback=initMap">
</script>
I have a textarea field that user can type or paste the address into and then I use google geocoder to convert those addresses into latitude and longitude and display them on the latitude and longitude form fields.Also the user can drag to relocate the marker for specific address. My problem here is after it converted into latitude and longitude, I want the google map marker update its location automatically on the default latitude and longitude.
Here is the code for converting from address to latitude and longitude.
function getAddress() {
var geocoder = new google.maps.Geocoder();
var addr = document.getElementById('ClinicAddress').value;
geocoder.geocode({'address': addr}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
document.getElementById('ClinicLatitude').value = latitude;
document.getElementById('ClinicLongitude').value = longitude;
}
});
}
and here is my code for dragging google map marker
function initialize() {
var $latitude = document.getElementById('ClinicLatitude');
var $longitude = document.getElementById('ClinicLongitude');
//default latitude and longitude for Tokyo JP
var latitude = 35.7061767;
var longitude = 139.7340773;
document.addEventListener('input', function() {
if($latitude.value !== '' && $longitude.value !== '') {
latitude = $latitude.value;
longitude = $longitude.value;
alert(latitude + "," + longitude);
}
});
var zoom = 15;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag to specify your address',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (marker) {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
}
initialize();
Ok, finally I found a solution for this. Any better solution is welcome.
function getAddress() {
var geocoder = new google.maps.Geocoder();
var addr = document.getElementById('ClinicAddress').value;
geocoder.geocode({'address': addr}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
document.getElementById('ClinicLatitude').value = latitude;
document.getElementById('ClinicLongitude').value = longitude;
//call initialize to update new location with latitude and longitude
initialize(latitude,longitude);
}
});
}
//getting google map api on form
function initialize(latitude,longitude) {
var $latitude = document.getElementById('ClinicLatitude');
var $longitude = document.getElementById('ClinicLongitude');
//default latitude and longitude for Tokyo JP
//var latitude = 35.7061767;
//var longitude = 139.7340773;
var zoom = 15;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag to specify your address',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (marker) {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
}
//set default latitude and longitude
initialize('35.7061767','139.7340773');
I have a XML file containing meteorological measures with their latitudes and longitudes.
I want to find the city corresponding to a given latitude and longitude with Javascript. How should I do ?
Thanks for your answers
// To initialisation Map and GeoCoder
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var marker,map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// It is called Reverse Geocoding
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
how do I combine geocoding with known coordinates? Lets say, I want to show markers from an array of coordinates.
function codeAddress()
{
var latlng = new google.maps.LatLng(42.745334, 12.738430);
var address = document.getElementById("location").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 11,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image_icon
});
}
});
}
So I have latlng coordinates and address of a value, how do I combine these two into the maps?
Thank you!
function codeAddress()
{
// The following sets up your array. Most likely you will retrieve the data
// from elsewhere, so this is just meant as an illustration.
var coords = [];
coords.push({lat:100,long:200, caption:'yo'});
coords.push({lat:150,long:250, caption:'yo yo'});
coords.push({lat:200,long:250, caption:'yo ho ho'});
var address = document.getElementById("location").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 11,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image_icon
});
var myLatlng;
// loop through all the elements in the array, and add markers for each to the map object you've already created.
for (i=0;i<coords.length;i++){
myLatlng = new google.maps.LatLng(coords[i].lat,coords[i].lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:coords[i].caption
});
}
}
});
}