I want to convert zipcode to longitude and latitude and write to a csv file. I use storelocator by google and I need to place marker only with zipcode...
for (var i = 1, row; row = rows[i]; i++) {
row = this.toObject_(headings, this.parseRow_(row));
var features = new storeLocator.FeatureSet;
features.add(this.FEATURES_.getById('Wheelchair-' + row.Wheelchair));
features.add(this.FEATURES_.getById('Audio-' + row.Audio));
var position = new google.maps.LatLng(row.Ycoord, row.Xcoord);
var shop = this.join_([row.Shp_num_an, row.Shp_centre], ', ');
var locality = this.join_([row.Locality, row.Postcode], ', ');
var store = new storeLocator.Store(row.uuid, position, features, {
title: row.titre,
address: this.join_([shop, row.Street_add, locality], '<br>'),
hours: row.Hrs_of_bus
});
stores.push(store);
}
Related
enter image description here
For portal user, I want the list of field values to appear based on the value chosen by this portal user for example:
If this portal user chooses the country, only institutions in the selected country must appear in the list of institutions field.
publicWidget.registry.portalMedical = publicWidget.Widget.extend({
selector: '.o_portal_medical',
events: {
'change select[name="country_id"]': '_onCountryChange',
'change select[name="state_id"]': '_onStateChange',
'change select[name="institution_id"]': '_onInstitutionChange',
},
start: function () {
var def = this._super.apply(this, arguments);
this.$state = this.$('select[name="state_id"]');
this.$stateOptions = this.$state.filter(':enabled').find('option:not(:first)');
this.$institution = this.$('select[name="institution_id"]');
this.$institutionOptions = this.$institution.filter(':enabled').find('option:not(:first)');
this.$doctor = this.$('select[name="doctor_id"]');
this.$doctorOptions = this.$doctor.filter(':enabled').find('option:not(:first)');
this._adaptAddressForm();
return def;
},
_adaptAddressForm: function () {
var $country = this.$('select[name="country_id"]');
var countryID = ($country.val() || 0);
this.$stateOptions.detach();
var $displayedState = this.$stateOptions.filter('[data-country_id=' + countryID + ']');
var nb = $displayedState.appendTo(this.$state).show().length;
//this.$state.parent().toggle(nb >= 1);
var $state = this.$('select[name="state_id"]');
var stateID = ($state.val() || 0);
this.$institutionOptions.detach();
var $displayedInstitution = this.$institutionOptions.filter('[data-state_id=' + stateID + ']');
var mb = $displayedInstitution.appendTo(this.$institution).show().length;
//this.$institution.parent().toggle(mb >= 1);
},
_onCountryChange: function () {
this._adaptAddressForm();
},
_onStateChange: function () {
this._adaptAddressForm();
},
});
I'm using gmaps Api to make a route for a person who have to visit a list of markets (my waypoints) to take note of their stocks. I'm using the user's house location for the origin of the route and the location of the markets as my waypoints. The problem is that I don't know which waypoint is the route's destination because I set the property optimization = true when call the the direction service, but the api needs a destination to trace the route.
What I need is a way to tell the api to use the last waypoint of my optimized route as a destination.
You could make multiple requests to the directions service, one with each possible waypoint as the final destination, pick the shortest resulting distance.
proof of concept fiddle
code snippet:
var map;
var directionsServices = [];
var directionsDisplays = [];
// constant "start" address
var start = "Paramus, NJ";
// list of possible candidate destinations/waypoints (must be < 9)
var locations = ["67 E Ridgewood Ave, Paramus, NJ 07652",
"450 Rochelle Ave, Rochelle Park, NJ 07662,",
"720 River Rd, New Milford, NJ 07646",
"280 Main St, New Milford, NJ 07646",
"469 Passaic St, Hackensack, NJ 07601",
"91 Broadway, Elmwood Park, NJ 07407",
"206 Market St, Saddle Brook, NJ 07662"
];
var routes = [];
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
document.getElementById('info').innerHTML += "<u><b>intermediate results:</b></u><br>";
getDirections(start, locations, map);
}
google.maps.event.addDomListener(window, "load", initialize);
function getDirections(start, waypoints, map) {
var requests = [];
var request = {
origin: start,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
for (var j = 0; j < waypoints.length; j++) {
var waypts = [];
for (var i = 0; i < waypoints.length; i++) {
if (i != j) {
waypts.push({
location: waypoints[i],
stopover: true
});
}
}
requests[j] = {};
requests[j].destination = waypoints[j];
requests[j].waypoints = waypts;
requests[j].origin = start;
requests[j].optimizeWaypoints = true;
requests[j].travelMode = google.maps.TravelMode.DRIVING;
setTimeout(function(request, j) {
sendDirectionsRequest(request, j, map);
}(requests[j], j), 3000 * j);
}
}
function sendDirectionsRequest(request, index, map) {
var directionsService = new google.maps.DirectionsService();
directionsServices.push(directionsService);
directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var route = response.routes[0];
routes.push(route);
var distance = 0;
var duration = 0;
for (var i = 0; i < route.legs.length; i++) {
distance += route.legs[i].distance.value;
duration += route.legs[i].duration.value;
}
route.distance = distance;
route.duration = duration;
route.index = index;
document.getElementById('info').innerHTML += (routes.length - 1) + " dist:" + (route.distance / 1000).toFixed(2) + " km dur:" + (route.duration / 60).toFixed(2) + " min dest:" + index + " loc:" + locations[index] + " waypt order:" + route.waypoint_order + "<br>";
if (routes.length == locations.length) {
routes.sort(sortFcn);
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
polylineOptions: {
strokeOpacity: 0.9,
strokeWeight: 4,
strokeColor: "black",
zIndex: 10
}
});
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
document.getElementById('info').innerHTML += "<u><b>shortest result:</b></u><br>" + routes[0].index + " dist:" + (routes[0].distance / 1000).toFixed(2) + " km dur:" + (routes[0].duration / 60).toFixed(2) + " min dest:" + routes[0].index + " loc:" + locations[index] + " waypt order:" + routes[0].waypoint_order + "<br>";
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function sortFcn(a, b) {
if (a.distance > b.distance) return 1;
else if (a.distance < b.distance) return -1;
else return 0;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="map_canvas"></div>
I am trying to create map markers from an array by using geocoding. I store the addresses on an array as well as the addresses' title. problem is in my loop, the title is being set to the last value of my last array although the markers are being set correctly from the addresses in the array. here is my code:
maprender : function (comp, map) {
new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
map: map
});
var names = new Array("ABC","DEF","GHI"),
mapAdd = new Array();
mapAdd[0] = "Address 1";
mapAdd[1] = "Address 2";
mapAdd[2] = "Address 3";
var geocoder = new google.maps.Geocoder();
for (var i = 0; i < mapAdd.length; i++) {
var lat = 0,
lng = 0,
x = names[i];
geocoder.geocode({
'address': mapAdd[i]},
function (results,status) {
if (status === google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
console.log(lat + " " + lng);
new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: x,
map: map
});
console.log(x);
}
}
});
}
}
the title is returning "GHI" on all of the markers.
Based on http://blog.jbrantly.com/2010/04/creating-javascript-function-inside.html
Try it this way
function geocode(i) {
var lat = 0,
lng = 0,
x = names[i];
geocoder.geocode({
'address': mapAdd[i]},
function (results,status) {
if (status === google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
console.log(lat + " " + lng);
new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: x,
map: map
});
console.log(x);
}
}
});
}
for (var i = 0; i < mapAdd.length; i++) {
geocode(i);
}
Hope this helps
Ti.GeoLocation.forwardGeocoder() is not converting Non US address to lat and long values.
sample code below.
Ti.GeoLocation.forwardGeocoder('Hyderabad, India', function(e){
var lat = e.latitude;
var long = e.longitude;
});
with this code we are getting lat and long values are undefined.
The proper way to get US addresses, and everywhere else in the world (that Google can find) and display the Long/Lat on a titanium Map.
The code below uses the string variable: myAddress
var myAddress = address + ','+ city + ',' + postal + ',' + country //'Vieux Port, Montreal, Quebec, H2X3R4, Canada'
var xhrGeocode = Ti.Network.createHTTPClient();
xhrGeocode.setTimeout(120000);
xhrGeocode.onerror = function (e) {
alert('Google couldn\'t find the address... check your address');
};
xhrGeocode.onload = function (e) {
var response = JSON.parse(this.responseText);
if (response.status == 'OK' && response.results != undefined && response.results.length > 0) {
longitude = response.results[0].geometry.location.lng;
latitude = response.results[0].geometry.location.lat;
}
};
var urlMapRequest = "http://maps.google.com/maps/api/geocode/json?address=" + myAddress.replace(/ /g, '+');
urlMapRequest += "&sensor=" + (Ti.Geolocation.locationServicesEnabled == true);
xhrGeocode.open("GET", urlMapRequest);
xhrGeocode.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhrGeocode.send();
var addrReq = Titanium.Network.createHTTPClient();
var addrUrl = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&address="+ query;
addrReq.open("GET",addrUrl);
addrReq.send(null);
addrReq.onload = function()
{
var response = JSON.parse(this.responseText);
if(response.status == "OK"){
LT.Customlat=response.results[0].geometry.location.lat;
LT.Customlon=response.results[0].geometry.location.lng;
}
you will need to roll your own solution using google REST APIs, the underlying Titanium API does not support non-us addresses
Have a quick question. On my website I have a form that allows users to input their city, state, and country. This information is converted to $lat and $lng, which is used to create a marker on a google map. Problem is, I have multiple users that select the same city. Clustering is a HUGE pain... to be honest, I can't seem to find a good tutorial and I'm feeling a bit hopeless.
So I thought I'd just modify each $lat and $lng slightly. For example, this is the info I get for Travis AFB, CA: lat="38.263065" lng="-121.949699". Wondering if it's possible to add a bit of code that might let me modify those last bits. Any suggestions???
Here's how I geocode $address (combination of $city, $state, $country):
$geocodestring=file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=' . urlencode($address) );
$geocodedinfo=json_decode($geocodestring);
$lat = $geocodedinfo->results[0]->geometry->location->lat;
$lng = $geocodedinfo->results[0]->geometry->location->lng;
And that information goes into my SQL database. This is the code that actually creates the map (pretty straightforward).
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.614495, -122.341861), 2);
map.enableScrollWheelZoom();
GDownloadUrl("world_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var first_name = markers[i].getAttribute("first_name");
var last_name = markers[i].getAttribute("last_name");
var email = markers[i].getAttribute("email");
var affiliation = markers[i].getAttribute("affiliation");
var status = markers[i].getAttribute("status");
var service = markers[i].getAttribute("service");
var rank = markers[i].getAttribute("rank");
var specialty = markers[i].getAttribute("specialty");
var city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var country = markers[i].getAttribute("country");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country) {
var marker = new GMarker(point);
var html = "" + rank + " " + first_name + " " + last_name + " " + service + ", " + status + " " + specialty + " " + affiliation + " " + city + ", " + state + " " + country + " " + email + " " + " ";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Any help/suggestions would be much appreciated!!!
Jeremy
markerclusterer for v2 may solve your problem.
Find code and examples here
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/