Help to find,how can I show the address dynamic in infowindow (when marker click)
I have to include the Latitud& longitude,but because of loop its shows only one address for all marker,but here i need to display specific address for individual marker
var infoWindow = new google.maps.InfoWindow();
var geocoder;
var map;
var i,j;
var js_lats = ['11.798880','13.0826802','12.975444'];
var js_longs =['77.827760','80.2707184','80.220642'];
if(js_lats.length>0)
{
for (i = 0; i < js_lats.length; i++) {
var latlng = new google.maps.LatLng(js_lats[i],js_longs[i]);
var geocoder = geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
loc= results[1].formatted_address;
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 10
}
var geocode = document.getElementById('address1').value;
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
geocoder = new google.maps.Geocoder();
document.getElementById("dis").setAttribute('style','visibility:visible;');
geocoder.geocode( { 'address': loc},
function(results, status)
{
map.fitBounds(results[0].geometry.viewport);
var icon = "Markers/letter_m.png";
var infoWindow = new google.maps.InfoWindow();
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
});
var loc1 = loc;
(function (marker){
google.maps.event.addListener(marker, "click", function (e) {{
infoWindow.setContent("<span class='lm_loc_detail_trk'>Location :</span><span class='lm_addr_detail_trk'>"+loc1+ "</span></div>");
infoWindow.open(map, marker);
}});})(marker);
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(6);
google.maps.event.removeListener(listener);
});
}
else{alert('Geocode was not successful for the following reason: ' + status);
}
});}}});}}
Related
I have a map on my website, in which i have to get user address by just dragging & drop marker onto any place on map. I have successfully display a map on my website. But i have no idea of How to Show that marker on map which can be dragged & get User addess by that. I have below code of maps which is getting user address by clicking on map. Thanks.
<div id='map-canvas'></div>
var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function(event) {
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
You should add a marker and a listener on drag end
in this sample the listner show the drag end lat, lng and performe geocode
<div id='map-canvas'></div>
var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"
});
marker.addListener('dragend', function(event) {
alert(event.latLng.lat() + ' ' + event.latLng.lng());
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
google.maps.event.addListener(map, 'click', function(event) {
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
I'm trying to take an address in a for loop and get the latitude and longitude of that address and create a marker with the lat/long values.
I have the address converting to lat/long but I cannot get the "new Marker" to take the values.
Any suggestions?
var latitude;
var longitude;
var myLatLng;
for (i = 0; i < locations.length; i++) {
var geocoder = new google.maps.Geocoder();
var BuisAddress = locations[i][1];
geocoder.geocode({ 'address': BuisAddress }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
}
});
myLatLng = new google.maps.LatLng(latitude, longitude);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
**** 1st UPDATE ****
if I do that, then only one marker shows up when I have multiple addresses and the marker popup doesn't work. If I do the following, then all three markers show up, but still none of clickable popup's work.
var geocoder = new google.maps.Geocoder();
BuisAddress = locations[i][1];
geocoder.geocode({ 'address': BuisAddress }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
myLatLng = new google.maps.LatLng(latitude, longitude);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
});
myLatLng = new google.maps.LatLng(latitude,longitude);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var str = encodeURI(locations[i][1]).replace(",", "");
var address = str.replace(/%20/g, "+");
var infowindow = new google.maps.InfoWindow();
You can try this way (i added a marker vector for manage the vector collection)
var latitude;
var longitude;
var myLatLng;
myMarker = []
for (i = 0; i < locations.length; i++) {
geocoder.geocode({ 'address': BuisAddress }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
myLatLng = new google.maps.LatLng(latitude, longitude);
marker[i] = new google.maps.Marker({
position: myLatLng,
map: map
});
}
});
google.maps.event.addListener(marker[i], 'click', (function(marker[i], i) {
return function() {
var str = encodeURI(locations[i][1]).replace(",", "");
var address = str.replace(/%20/g, "+");
var infowindow = new google.maps.InfoWindow();
}
}));
}
If anyone is wondering how I did it, here it is!
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
var latitude;
var longitude;
geocoder.geocode({
'address': locations[i][1]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url,
latitude: latitude,
longitude: longitude
})
infoWindow(marker, map, title, address, url, latitude, longitude);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address, url, latitude, longitude) {
google.maps.event.addListener(marker, 'click', function() {
var html ="html code here...";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, title, address, url);
return marker;
}
I have a webpage to find latitude, longitude, and get a marker for that position. I use Google Maps.
My webpage get 2 addresses from user input, address 1 and address 2, and calls codeAddress()
<div id="panel">
<input id="address1" type="textbox" value="">
<input id="address2" type="textbox" value="">
<input type="button" value="find!" onclick="codeAddress()">
</div>
This is my JavaScript code:
var map;
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;
function initialize() {
var latlng = new google.maps.LatLng(-7.275920, 112.791871);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var gc = google.maps.Geocoder();
gc.geocode({
'address': address1
}, function (res1, status) {
if (status == google.maps.GeocoderStatus.OK) {
gc.geocode({
'address': address2
}, function (res2, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: res1[0].geometry.location,
map: map
});
new google.maps.Marker({
position: res2[0].geometry.location,
map: map
});
}
});
}
});
}
When I click the button find, I didn’t get the markers. Can any body help me?
Modify the codeAddress function like this:
function codeAddress() {
var gc = new google.maps.Geocoder(); // notice new keyword
initialize(); // Calling initialize. If you skip it, maps aren't loading
gc.geocode({
'address': address1
}, function(res1, status) {
if (status == google.maps.GeocoderStatus.OK) {
gc.geocode({
'address': address2
}, function(res2, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: res1[0].geometry.location,
map: map
});
new google.maps.Marker({
position: res2[0].geometry.location,
map: map
});
}
});
}
});
Make sure both of the inputs have some value to test it.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/213/
update the address variables from the form when the function runs
function codeAddress() {
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;
check for status != OK
} else alert("Geocode failed of " + address1 + ", status=" + status);
use "new" before the google maps Geocoder constructor
var gc = new google.maps.Geocoder();
remove existing markers before displaying new ones so the markers don't accumulate on the map
if (marker1 && marker1.setMap) marker1.setMap(null);
complete code:
var map = null;
var marker1 = null;
var marker2 = null;
var gc = new google.maps.Geocoder();
function initialize() {
var latlng = new google.maps.LatLng(-7.275920, 112.791871);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;
gc.geocode({
'address': address1
}, function (res1, status) {
if (status == google.maps.GeocoderStatus.OK) {
gc.geocode({
'address': address2
}, function (res2, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (marker1 && marker1.setMap) marker1.setMap(null);
marker1 = new google.maps.Marker({
position: res1[0].geometry.location,
map: map
});
if (marker2 && marker2.setMap) marker2.setMap(null);
marker2 = new google.maps.Marker({
position: res2[0].geometry.location,
map: map
});
} else alert("Geocode failed of " + address2 + ", status=" + status);
});
} else alert("Geocode failed of " + address1 + ", status=" + status);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
I have used the following code to display the marker on the location I have dynamically searched for(code). Now I want to highlight the searched location boundary. (For instance, if I search 'Tokyo', it should mark the boundary of 'Tokyo'(chk the image for reference).
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
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
});
}
else
{
$('#noResults').html("Unsuccessful:" + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Kindly check this map view: http://gmaps-samples-v3.googlecode.com/svn/trunk/map_language/map_lang.html
If you click on A or B, it will show location name in default marker. I wish to show some custom texts here. How can I do that?
My JavaScript code for this is:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var oldDirections = [];
var currentDirections = null;
//getting latitude and longitude from address
var latitude;
var longitude;
var geocoder = new google.maps.Geocoder();
var address = "Downtown Berkeley";
geocoder.geocode( { "address": address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
// do something with the geocoded result
//
latitude = results[0].geometry.location.lat()
longitude = results[0].geometry.location.lng()
alert(latitude )
}
});
//map initialize
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(-33.879,151.235),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//adding marker
var marker = new google.maps.Marker
(
{
position: new google.maps.LatLng(latitude , longitude),
map: map,
title: "Click me"
}
);
var infowindow = new google.maps.InfoWindow({
content: "Location info:<br/>Country Name:<br/>LatLng:"
});
google.maps.event.addListener(marker, "click", function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
directionsDisplay = new google.maps.DirectionsRenderer({
"map": map,
"preserveViewport": true,
"draggable": true
});
directionsDisplay.setPanel(document.getElementById("directions_panel"));
google.maps.event.addListener(directionsDisplay, "directions_changed",
function() {
if (currentDirections) {
oldDirections.push(currentDirections);
}
currentDirections = directionsDisplay.getDirections();
});
calcRoute();
}
function calcRoute() {
var start = "El Cerrito del Norte";
var end = "Downtown Berkeley";
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
You set that content in the createInfoWindow() method.