How do I add this jQuery into my Javascript? - javascript

I'm extremely new to both JS and jQuery, and I've got this code:
<html>
<style>
/**
* Default attributes for gadget body.
*/
body {
font-family: Arial;
background: none transparent;
padding: 0px;
}
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<body>
<div id="map_canvas"></div>
<script>
var APIKey = "MyKeyValueIsInHere";
var geocoder;
var map;
var marker;
var locationTest = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1';
var lat = 55.653363;
var lng = 12.547604;
function initialize() {
var latlng = new google.maps.LatLng(lat,lng);
// set the options for zoom level and map type
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// create a map in the map_canvas div element
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setCenter(latlng);
var marker = new google.maps.Marker({
map: map,
position: latlng
});
alert(locationTest);
var text = JSON.parse(locationTest);
var infoWindow = new google.maps.InfoWindow();
var houseNumber = text.address.house_number;
var road = text.address.road;
var suburb = text.address.suburb;
var zipCode = text.address.postcode;
var city = text.address.city;
var address = road + " " + houseNumber + ", " + zipCode + " " + suburb + " i " + city;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(address);
infoWindow.open(map, this);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=" + APIKey + "&sensor=false&callback=initialize";
document.body.appendChild(script);
}
loadScript();
</script>
</body>
</html>
And i need to incorporate the following code :
$('#c').load('http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1', function (response) {
console.log('response is', response);
var b = $('#c').html();
console.log('b is', b);
var a = JSON.parse(b);
console.log('a is ', a);
$('#d').html(a.address.neighbourhood);
});
Basically, this code is supposed to show a location on google maps, the location is set by long and latitude. On the marker, I want an info box to pop up with the address. The jQuery code i've found, seems to work here, but I have fallen short now that I have to include it into my JS. I hope someone can help me, I can't figure out how to implement it.

You need to add jquery script link to your tag.
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

Related

condition not working properly in google map javaScript for marker

I am trying to plot different markers on google maps taking data from a csv file. I am using parsecsv-0.4.3-beta to read the csv. Everything is working just fine except when I compare two fields and try to change the marker according to that. It is changing the marker but for few fields it's giving the wrong marker. I think I have made some mistake in the condition.
<?php
# include parseCSV class.
require_once('../parsecsv.lib.php');
# create new parseCSV object.
$csv = new parseCSV();
# Parse '_books.csv' using automatic delimiter detection...
$csv->auto('latlang.csv');
# ...or if you know the delimiter, set the delimiter character
# if its not the default comma...
// $csv->delimiter = "\t"; # tab delimited
# ...and then use the parse() function.
// $csv->parse('_books.csv');
//print_r ($csv->data);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCWPvg5SpuPqRnY0Ldhlz2QhLgrCqnlYFM&sensor=false"></script>
<script type="text/javascript">
var markers = <?php print json_encode($csv->data); ?>;
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[1].Latitude, markers[1].Longtitude),
zoom: 7,
styles: [{"stylers": [{ "saturation": -100 }]}],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.Latitude, data.Longtitude);
var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
**if (data.CL < data.DL) {
var image = image2;
}else {
var image = image1;
};**
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Station,
icon:image,
});
//Attach click event to the marker.
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + "<p>" + "<b>Station:</b> " + data.Station + "<br>"+ "CL:" + data.CL + "<br>" + "<b>River Name: </b>" + data.RiverName + "<br>" + "<b>DL(mPWD): </b>" + data.DL +"<br>" + "<b>HRWL(mPWD):</b> "+ data.HRWL +"</p>"+"</div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 900px; height: 500px">
</div>
</body>
</html>
Here is a sample of the csv file:
In most cases it shows the right marker... some markers do not meet the condition.
Please add these lines in your code:
data.CL = Number(data.CL);
data.DL = Number(data.DL);
if (data.CL < data.DL) {
var image = image2;
}else {
var image = image1;
};
Your data was coming in string, but we are using < operator to check that so in some case it might fail. Better to convert and then check for greater or less.

Dynamic listener in javascript Google Maps API [duplicate]

This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 7 years ago.
i have source JSON file and javascript code. I want dynamically load markers from JSON. For each marker is there one contentString, which has to be displayed after click on marker. But the problem is that after click on first marker is showed marker two info. Is there a solution and what is the best?
JSON:
[
{
"Nazev":"Pobocka 1",
"Mesto":"Praha",
"Ulice":"Nejvetsi 35\/352",
"PSC":"12345",
"Web":"www.praha.cz",
"Lat":"50.0596696",
"Long":"14.4656239"
},
{
"Nazev":"Pobocka 2",
"Mesto":"Brno",
"Ulice":"Nejmensi 384\/64",
"PSC":"54321",
"Web":"www.brno.cz",
"Lat":"49.2020701",
"Long":"16.5779606"
}
]
Javascript source:
<script>
function initialize() {
var json = getdata();
var center = new google.maps.LatLng(49.9789391,15.6342143);
var mapOptions = {
zoom: 8,
center: center
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for( i = 0; i < json.length; i++) {
var Nazev = json[i].Nazev;
var Mesto = json[i].Mesto;
var Ulice = json[i].Ulice;
var PSC = json[i].PSC;
var Web = json[i].Web;
var Lat = json[i].Lat;
var Long = json[i].Long;
var contentString = "<b>"+Nazev+"</b><br>"+Mesto+"<br>"+Ulice+"<br>"+PSC+"<br><a href='http://"+Web+"'>"+Web+"</a>";
var latLng = new google.maps.LatLng(Lat,Long);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This is a duplicate of Google Maps JS API v3 - Simple Multiple Marker Example
working code snippet:
function initialize() {
var json = [{
"Nazev": "Pobocka 1",
"Mesto": "Praha",
"Ulice": "Nejvetsi 35\/352",
"PSC": "12345",
"Web": "www.praha.cz",
"Lat": "50.0596696",
"Long": "14.4656239"
}, {
"Nazev": "Pobocka 2",
"Mesto": "Brno",
"Ulice": "Nejmensi 384\/64",
"PSC": "54321",
"Web": "www.brno.cz",
"Lat": "49.2020701",
"Long": "16.5779606"
}];
var center = new google.maps.LatLng(49.9789391, 15.6342143);
var mapOptions = {
zoom: 8,
center: center
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < json.length; i++) {
var Nazev = json[i].Nazev;
var Mesto = json[i].Mesto;
var Ulice = json[i].Ulice;
var PSC = json[i].PSC;
var Web = json[i].Web;
var Lat = json[i].Lat;
var Long = json[i].Long;
var contentString = "<b>" + Nazev + "</b><br>" + Mesto + "<br>" + Ulice + "<br>" + PSC + "<br><a href='http://" + Web + "'>" + Web + "</a>";
var latLng = new google.maps.LatLng(Lat, Long);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', (function(marker, contentString) {
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, contentString));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
Your issue is that your event listener is asynchronous, so by the time it gets called, the for loop has reached the end and the value of contentString is at the end. You need to fix your scope.

Google map loads on localhost ,but fails to load on online server

i have been able to deploy google map on localhost, it loads all coordinates with success.
But when i upload the same code to my server, it completely fails to load.I tried all i could, am really at a lost here.
<html>
<head>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script>
<style>
BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; }
#map_canvas { width:100%; height: 100%; z-index: 0; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" /></script>
<script type='text/javascript'>
jQuery(document).ready( function($){
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}
//Get data, and replace it on the form
var geocoder;
var map;
var markersArray = [];
var infos = [];
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function deleteMarkers() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
setInterval(function(){
$.get('ajax_gp_gps.php', function(data){
var bounds = new google.maps.LatLngBounds();
var encodedString;
var stringArray = [];
encodedString = data;
stringArray = encodedString.split("****");
var x;
for (x = 0; x < stringArray.length; x = x + 1)
{
var addressDetails = [];
var marker;
addressDetails = stringArray[x].split("&&&");
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
//alert(image + " " + addressDetails[1] );
marker = new google.maps.Marker({
map: map,
position: lat,
content: addressDetails[0]
});
markersArray.push(marker);
google.maps.event.addListener( marker, 'click', function () {
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
// where I have added .html to the marker object.
//infowindow.setContent( marker.html);
info.open(map,this);
infos[0]=info;
});
bounds.extend(lat);
}
map.fitBounds(bounds);
});
},1000);
});
</script>
</head>
<body>
<?php include_once("ajax_gp_gps.php"); ?>
<div id='input'>
<input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>">
</div>
<div id="map_canvas"></div>
</body>
</html>
You need to check google API if your online domain has access to call it or not.
I had the same issue, and it was simple fix: If you page uses https, make sure google maps url within the script tag also uses https:

Google Maps API showing blank map

I'm sure this is a basic problem but I've hit my head against the wall too many times now, so hopefully someone will take pity on me!
I have the following example but all it does is show a grayed out box, no map at all. Can anyone tell me why?
I've checked that I'm actually returning a result and it seems to be working fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map-canvas {margin: 0;padding: 0;height: 100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize()
{
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': "England"}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(results[0].geometry.location),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Let's draw the map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
</head>
<body onload="">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
</body>
</html>
Try resizing the browser window, give a shake to browser/drag it from browser tab with the cursor and you will see the map appearing.
From some strange reason in MVC partial view google map comes as blank, your map is working it just need to be resized.
Shaking a browser window with cursor sounds funny, but it works and I am not sure how to best describe it.
Thanks,
Anurag
=======================================================================
my final working code is below:
`
<script type="text/javascript">
$(document).ready(function () {
(function () {
var options = {
zoom: 6,
center: new google.maps.LatLng(-2.633333, 37.233334),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var arrLocation = [];
$("#markerDiv").find("div").each(function () {
var Lat = $(this).find("input[id='Latitude']").val();
var Lon = $(this).find("input[id='Longitude']").val();
var Id = $(this).find("input[id='Id']").val();
var AssessmentDet = $(this).find("input[id='AssessmentDateTime']").val();
var LocAcc = $(this).find("input[id='LocationAccuracy']").val();
var assessorName = $(this).find("input[id='AssessorName']").val();
var partnerName = $(this).find("input[id='PartnerName']").val();
arrLocation.push({
Id: Id,
Latitude: Lat,
Longitude: Lon,
AssessmentDate: AssessmentDet,
LocationAccuracy: LocAcc,
AssessorDetail: assessorName,
PartnerName: partnerName
});
});
var allMarkers = [];
for (var i = 0; i < arrLocation.length; i++) {
//final position for marker, could be updated if another marker already exists in same position
var latlng = new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude);
var finalLatLng = latlng;
var comparelatlng = "(" + arrLocation[i].Latitude + "," + arrLocation[i].Longitude + ")";
var copyMarker = arrLocation[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude),
map: map,
title: 'Equine # ' + arrLocation[i].Id,
icon:"abc.png"
});
var markerInfo = "Reference # : <b>" + arrLocation[i].Id + "</b><br/>";
markerInfo = markerInfo + "Assessor : <b>" + arrLocation[i].AssessorDetail + "</b><br/>";
markerInfo = markerInfo + "Date : <b>" + arrLocation[i].AssessmentDate + "</b><br/>";
markerInfo = markerInfo + "Partner : <b>" + arrLocation[i].PartnerName + "</b>";(function (marker, i) {
bindInfoWindow(marker, map, new google.maps.InfoWindow(), markerInfo);
})(marker, i);
}
})();
});
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
</script>
`
results[0].geometry.location is already a latLng object so you can just say:
center: results[0].geometry.location
Find the working fiddle here : http://jsfiddle.net/87z9K/
It is because of the worng "google.maps.LatLng" provided.
provide for a test the coords and it will work.
replace the line
center: new google.maps.LatLng(results[0].geometry.location),
with
center: new google.maps.LatLng(-34.397, 150.644)
get England coords
It wasn't exactly your issue, but closely related.
I found that I had to set the mapOptions with a valid centre, like so:
new google.maps.Map(mapCanvas, {
center: new google.maps.LatLng(-34.397, 150.644)
});
If I didn't enter map options, or if I did and it didn't have a valid center set, I'd get a blank map that didn't load tiles.
This can also occur if the height/width of the map is 0.
I tried to set map's MapTypeId and it helped as Anurag proposed:
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
I can see a general javascript issue with your code.
Your script might trying to embed the map in the page before the HTML is loaded.
Call the function like this (there are other ways).
<body onload="initialize()">

How do I use Google Maps geocoder.getLatLng() and store its result in a database?

Hey everybody! Im trying to use getLatLng() to geocode a list of postal/zip codes and store the generated point in the database to be placed on a map later. This is what I've got so far:
$(".geocodethis").click(function () {
var geocoder = new GClientGeocoder();
var postalCode = $(this).siblings(".postal").val();
var id = $(this).siblings(".id").val();
geocoder.getLatLng(postalCode, function (point) {
if (!point) {
alert(postalCode + " not found");
} else {
alert(point);
var serializedPoint = $.param(point);
//Geocode(id, point);
}
});
});
function Geocode(id, point) {
alert(point);
$.post("/Demographic/Geocode/" + id, point, function () {
alert("success?");
});
}
but I'm getting this.lat is not a function in my error console when i try to serialize the point object or use it in $.post()
From my research, I understand that geocoder.getLatLng() is asynchronous, how would that affect what I'm trying to do? I'm not running this code in a loop, and I'm trying to post the point using the anonymous callback function.
How can I save the information from point to use later?
Update
Creating a marker and trying to post that still results in the this.lat is not a function in the error console.
$(".geocodethis").click(function () {
var geocoder = new GClientGeocoder();
var postalCode = $(this).siblings(".postal").val();
var id = $(this).siblings(".id").val();
geocoder.getLatLng(postalCode, function (point) {
if (!point) {
alert(postalCode + " not found");
} else {
alert(point);
var marker = new GMarker(point);
$.post("/Demographic/Geocode/" + id, marker, function () {
alert("success?");
});
}
});
});
** Another Update **
I really need to save the geocoded address for later, even if I store the latitude/longitude values in my database and remake the marker when I'm ready to put it onto a map. Again, serializing or posting - seemingly using the point in any way other than in google maps functions gives the this.lat is not a function exception in my error log.
I'm using asp.net mvc - are there any frameworks out there that would make this easier? I really need help with this. Thanks.
If your stuck for 2 days maybe a fresh v3 start would be a good thing, this snipped does a similair job for me...
function GetLocation(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
ParseLocation(results[0].geometry.location);
}
else
alert('error: ' + status);
});
}
}
function ParseLocation(location) {
var lat = location.lat().toString().substr(0, 12);
var lng = location.lng().toString().substr(0, 12);
//use $.get to save the lat lng in the database
$.get('MatchLatLang.ashx?action=setlatlong&lat=' + lat + '&lng=' + lng,
function (data) {
// fill textboss (feedback purposes only)
//with the found and saved lat lng values
$('#tbxlat').val(lat);
$('#tbxlng').val(lng);
$('#spnstatus').text(data);
});
}
Have you tried this?
$(".geocodethis").click(function () {
var geocoder = new GClientGeocoder();
var postalCode = $(this).siblings(".postal").val();
var id = $(this).siblings(".id").val();
geocoder.getLatLng(postalCode, function (point) {
if (!point) {
alert(postalCode + " not found");
} else {
alert(point);
var marker = new GMarker(point);
map.addOverlay(marker);
obj = {lat: marker.position.lat(),
lng: marker.position.lng()};
$.post("/Demographic/Geocode/" + id, obj, function () {
alert("success?");
});
}
});
});
I haven't used V2 in a long time, so I'm not sure about the exact syntax, but the point is to create an object from the information you need (lat/lng) and serialize that.
Also, an upgrade to V3 is much recommended, if plausible.
You need to set a marker on the map, which takes a lat/long. You can save that info however you want or display immediately. (Code truncated for demo purpose)
map = new google.maps.Map(document.getElementById("Map"), myOptions);
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location
});
marker.setMap(map);
}
}
UPDATE (FOR v2)
$(".geocodethis").click(function () {
var geocoder = new GClientGeocoder();
var postalCode = $(this).siblings(".postal").val();
var id = $(this).siblings(".id").val();
geocoder.getLatLng(postalCode, function (point) {
if (!point) {
alert(postalCode + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
}
});
});
In V3 the coordinates must be first serialized as a string as shown by Arnoldiuss, before sending as json post data.
var lat = latlong.lat().toString().substr(0, 12);
var lng = latlong.lng().toString().substr(0, 12);
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<%# taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDS1d1116agOa2pD9gpCuvRDgqMcCYcNa8&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latitude = document.getElementById("latitude").value;
latitude = latitude.split(",");
var longitude = document.getElementById("longitude").value;
longitude = longitude.split(",");
var locName = document.getElementById("locName").value;
locName = locName.split(",");
var RoadPathCoordinates = new Array();
RoadPathCoordinates.length = locName.length;
var locations = new Array();
locations.length = locName.length;
var infowindow = new google.maps.InfoWindow();
var marker, i;
var myLatLng = new google.maps.LatLng(22.727622,75.895719);
var mapOptions = {
zoom : 16,
center : myLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//To Draw a line
for (i = 0; i < RoadPathCoordinates.length; i++)
RoadPathCoordinates[i] = new google.maps.LatLng(latitude[i],longitude[i]);
var RoadPath = new google.maps.Polyline({
path : RoadPathCoordinates,
strokeColor : "#FF0000",
strokeOpacity : 1.0,
strokeWeight : 2
});
//Adding Marker to given points
for (i = 0; i < locations.length; i++)
locations[i] = [locName[i],latitude[i],longitude[i],i+1];
for (i = 0; i < locations.length; i++)
{marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i][1], locations[i][2]),
map : map
});
//Adding click event to show Popup Menu
var LocAddress ="";
google.maps.event.addListener(marker, 'click', (function(marker, i)
{ return function()
{
GetAddresss(i);
//infowindow.setContent(locations[i][0]);
infowindow.setContent(LocAddress);
infowindow.open(map, marker);
}
})(marker, i));}
function GetAddresss(MarkerPos){
var geocoder = null;
var latlng;
latlng = new google.maps.LatLng(latitude[MarkerPos],longitude[MarkerPos]);
LocAddress = "91, BAIKUNTHDHAAM"; //Intializing just to test
//geocoder = new GClientGeocoder(); //not working
geocoder = new google.maps.Geocoder();
geocoder.getLocations(latlng,function ()
{
alert(LocAddress);
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else
{
place = response.Placemark[0];
LocAddress = place.address;
}
});
}
//Setting up path
RoadPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<s:form action="mapCls" namespace="/">
<s:hidden key="latitude" id="latitude"/>
<s:hidden key="longitude" id="longitude"/>
<s:hidden key="locName" id="locName"/>
<div id="map_canvas" style="float:left;width:70%;height:100%"></div>
</s:form>
</body>
</html>
I am doing reverse Geocoding, and want address of marker using lat and longitude. M facing problem with function "GetAddresss()", line "geocoder.getLocations(latlng,function ()" is not working properly. what should I Do?

Categories

Resources