I have a database containing addresses that are accurate to building level. When I put these manually into Google Map's search, Google Maps finds them no problem - the markers appears right over the correct building. However, when I pass these same addresses to the Google Maps API geocoder using the below code, the markers show up only on the street and not the building.
How do I increase the accuracy?
HTML/PHP:
<div id="addressline"><?php echo theaddress(); ?></div>
JS:
function myGeocodeFirst() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': document.getElementById("addressline").innerHTML},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
firstLoc = results[0].geometry.location;
map = new google.maps.Map(document.getElementById("map_canvas"),
{
center: firstLoc,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
markers = new google.maps.Marker({
position: firstLoc,
map: map,
});
}
else {
document.getElementById("text_status").value = status;
}
}
);
}
window.onload=myGeocodeFirst;
Google Maps uses a number of different data sources to locate search results on the map.
The entry you are seeing that is "correct" is a Places database entry. See this page and enter you search string (St Clement’s Church, Edge Lane, Chorlton, M21 9JF).
The geocoder gets is designed to return coordinates for postal addresses, there is not enough information in your string for it to return accurate results:
http://www.geocodezip.com/v3_example_geo2.asp?addr1=St%20Clement%E2%80%99s%20Church,%20Edge%20Lane,%20Chorlton,%20M21%209JF&geocode=1
It looks like it is just returning the geocode for the postcode:
Manchester M21 9JF, UK (53.4414411, -2.285287100000005)
It does look like the geocoder does have that location in it. If I use "St Clement’s Church, Edge Lane", it seems to get the "rooftop" geocode (although it reports "APPROXIMATE")
http://www.geocodezip.com/v3_example_geo2.asp?addr1=St%20Clement%E2%80%99s%20Church,%20Edge%20Lane,%20Chorlton,%20M21%209JF&geocode=1&addr2=St%20Clement%E2%80%99s%20Church,%20Edge%20Lane&geocode=2
St Clement's Church, 6 Edge Ln, Manchester, Lancashire M21 9JF, UK (53.4406823, -2.283755499999984)
proof of concept fiddle
code snippet:
var geocoder, map, service, infowindow, bounds;
function initialize() {
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
});
var request = {
query: "St Clement’s Church, Edge Lane, Chorlton, M21 9JF"
}
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
bounds = new google.maps.LatLngBounds();
service.textSearch(request, callback);
}
google.maps.event.addDomListener(window, "load", initialize);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
var marker = createMarker(results[i]);
bounds.extend(marker.getPosition())
}
map.fitBounds(bounds);
google.maps.event.trigger(marker, 'click');
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
return marker;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>
Basically there is a name and an address. Google database can have other name for the same location. You can read my answer here: http://www.stackoverflow.com/questions/12788664/google-maps-api-geocode-returns-different-co-ordinates-then-google-maps/12790012#12790012. In the google response you need to loop through the placemark object to find the most similar location.
Related
In my project I have a google map, and I need to get markers on my map from database.
I have simple code like in example:
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 {
alert('Geocode was not successful for the following reason: ' + status);
}
});
google.maps.event.addListener(map, 'idle', function () {
getmarkers(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
This code works well, but it has one lack - it loads new markers only if user moves map.
But I need to load markers also if user is just sitting in front of computer and look on a map, not moving it.
I think the best way to do this is to use setInterval(getmarkers(map), 3000) but if I use it except where that function google.maps.event.addListener(... it can't find map. Are there any ways to solve this problem?
there are 2 issues,
setInterval expects the first argument to be a function(but it isn't, it's a function-call which will be executed immediately). Use a anonymous function to execute the statement:
setInterval(function(){getmarkers(map);}, 3000);
place the setInterval-call at the end of initialize to be sure that map is defined.
My javascript isn't too hot, I'm trying to add a manual marker onto a number of locations gathered from the Google Places API.
I followed this post to get to my following code (with a few amendments):
<script type="text/javascript">
var map;
var infowindow;
var service ;
base_Icon_festival = "https://maps.gstatic.com/mapfiles/ms2/micons/volcano.png";
shadow_festival = "https://maps.gstatic.com/mapfiles/ms2/micons/volcano.shadow.png";
function initialize(lat,lng)
{
var origin = new google.maps.LatLng(lat,lng);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: origin,
zoom: 14,
scrollwheel: false,
});
var request = {
location: origin,
radius: 2500,
types: ['train_station','bus_station','subway_station','airport']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
base_Icon_train = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
base_Icon_bus = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
base_Icon_subway = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
base_Icon_airport = "http://maps.google.com/mapfiles/ms/icons/yellow.png";
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker;
var icon_to_use;
if (place.types.indexOf('train_station') != -1) {
icon_to_use = base_Icon_train;
} else if (place.types.indexOf('bus_station') != -1) {
icon_to_use = base_Icon_bus;
} else if (place.types.indexOf('subway_station') != -1) {
icon_to_use = base_Icon_subway;
} else if (place.types.indexOf('airport') != -1) {
icon_to_use = base_Icon_airport;
}
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon_to_use
});
var content='<strong style="font-size:1.2em">'+place.name+'</strong>'+
'<br/><strong>Latitude: </strong>'+placeLoc.lat()+
'<br/><strong>Longitude: </strong>'+placeLoc.lng()+
'<br/><strong>Type: </strong>'+place.types[0];
//make a request for further details
service.getDetails({reference:place.reference}, function (place, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK)
{
more_content='<hr/><strong>Details';
if(place.website)
{
more_content+='<br/><br/><strong>'+place.website+'';
}
}
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content+more_content);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', function(){initialize(<?php echo $coordinated; ?>);});
</script>
<div id="map" style="height:400px;"></div>
Now I would like to manually add another marker which is located at the center of the map (ie, the variable origin which is currently being pulled from a PHP variable - var origin = new google.maps.LatLng(lat,lng);). I also need this marker to have a different icon associated with it (base_Icon_festival and shadow_festival respectively).
I'm not sure how to manually add another marker to the ones already gathered by the places API?
End goal: have a festival icon marker at the center of the map and a number of public transport markers surrounding it, resulting code to go on individual festival pages of a website.
Thanks in advance to anyone who can help.
In the Google Maps API, markers are added to the map by creating a Marker object and setting the map property. This is the snippet in your code that adds the existing Markers.
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon_to_use
});
To add a new marker you would just replace the position and icon properties with your values.
new google.maps.Marker({
map: map,
position: origin,
icon: shadow_festival
});
This code can probably be added at the end of the Callback function and if you don't need the actual marker object for anything else, you can just create the Marker object and never assign it.
There is an example from the Google Maps API docs here.
var MapApiApplication = {
myCurrentPosition : "",
mapOptions : "",
marker : "",
initialize : function(){
MapApiApplication.myCurrentPosition = new google.maps.LatLng(10.112293000000000000, 76.352684500000010000);
MapApiApplication.mapOptions = {
zoom: 13,
center: MapApiApplication.myCurrentPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
MapApiApplication.map = new google.maps.Map(document.getElementById('map-canvas'), MapApiApplication.mapOptions);
MapApiApplication.marker = new google.maps.Marker({
position: MapApiApplication.myCurrentPosition,
map: MapApiApplication.map,
title: 'Here You are'
});
},
};
I have the current position's latitude and longitude. How can i find nearby hospitals locations using only javascript and google maps api.
You need to use the Places Library. In the Place Search Requests you can specify a type - which categorizes what "type" of place you are searching for. According to the Supported Place Types by Google Places API, there are hospital and health types - which would probably be your best bet to get hospitals in your search response.
I had a chance to work on it recently.
Here is the working code snippet:
// comments inline
var map;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(19.107567, 72.8335); // sample location to start with: Mumbai, India
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 200,
types: ['hospital', 'health'] // this is where you set the map to get the hospitals and health related places
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<div id="map-canvas"></div>
It is important to note that the places wouldnt be marked onto the map if you load the library and Javascript at the end of <body> tag.
actually i require an api to find hospitals near me.the thing is i require it for thunkable.Can u tell me how to use the above api(https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places) for the same
I'm developing a web page with a Google Maps application and I'm having a little trouble with something. As it stands, the web page has a functional map (without any layers) and a search bar. I'm new to programming so hopefully there is a quick fix that I'm missing.
When I search an address, there is a placemark that is placed on the map. However, the map doesn't zoom into the placemark. How can I make the map zoom in for each searched address?
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (55.1667, -114.4000);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
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 {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
Thank you
I would call two functions:
(1) center the map on the marker
Either you already have the LatLng, or obtain it from marker.getPosition(), with it call map.setCenter(myLatLng).
(2) Set the zoom of the map
map.setZoom(zoomLevel), could be fixed around 12 to 16, or variable depending what kind of marker it is (street address or city overview?) This information can be stored in the marker variable, marker.zoomLevel.
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 });
map.setZoom(16);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
At the moment I serve pages showing a google map with a marker using an address retrieved from my database. I currently use a fairly simple piece of javascript code to add that marker by geocoding. My js code is dynamically generated by php. All is static except the "query" definition which gets initialized with the address search string.
I new to OSM and did some research to see if it can achieve this. At the moment I'm not sure it can. I found there are several js api's like OpenLayers which I'd need to use.
To sum it up :
How to add and show a single marker to an OSM, where the location is based on an address instead of a latitude/longtitude pair?
My current google based code is:
<script>
var geocoder; var map; var marker;
var query = 'Deutschland, Berlin, Platz der Republik 1, 11011';
function initialize()
{
var companyLocation = new google.maps.LatLng(51.964577109947506, 5.07568359375);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}
function codeAddress()
{
var address = query;
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,
title: "Bundestag",
labelContent: "",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
} else {
$('#map_canvas').html('<p style="margin: 15px">Address could not be found</p>');
}
});
}
</script>
See http://wiki.openstreetmap.org/wiki/Nominatim
Not going to write the code for you, but that wiki page has detailed information on how to call the Nominatim geocoding service.