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.
Related
I have used for loop to display the markers and info window. But the infowindow showing only the last value of the loop.
Here is the code im using.
function initialize()
{
try
{
var geocoder;
var map;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.511770, -72.809520);
var mapOptions = {
center: latlng,
zoom: 9,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var markers = JSON.parse('[{"address":"40C Leslie Road,Bridgeport,CT","Description":"Bridgeport - 82 Unit Community"},{"address":"56 Ironwood Road,West Hartford,CT","Description":"West Hartford - 45 Unit Community"}]');
var infoWindow = new google.maps.InfoWindow();
// var address;
for (i = 0; i < markers.length; i++)
{
var address = markers[i];
geocoder.geocode({ 'address': 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,
icon:'Images/pin.png',
position: results[0].geometry.location
});
google.maps.event.addListener(marker, "click", function (e)
{
infoWindow.setContent("<div style='border:0px solid red;height:auto;;width:auto;'>" + address.Description + "</div>");
infoWindow.open(map, marker);
});
}
else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
// map.setCenter(new google.maps.LatLng(41.511770, -72.809520))
}
}
catch (ex)
{
alert(ex.message);
}
}
google.maps.event.addDomListener(window, "load", initialize);
Please help me.
Thanks,
Venkat.
The problem is that geocoder.geocode is an asynchronous function. In other words, your execution moves away from the for loop before your requests has finished retrieving the values. Thus, you will be getting same address values, because it is the last value of the for loop when it had finished and you are placing everything to the same var address = ... variable.
To fix this, you need to wrap your geocoder.geocode request inside a self-executing anonymous function. As a result, your code works properly, because var address = ... is defined in it's own scope, together with the requests. See example below:
...
// Start of self-executing anonymous function
(function() {
var address = markers[i];
...
and:
...
// End of self-executing anonymous function
})();
// map.setCenter(new google.maps.LatLng(41.511770, -72.809520))
...
JS FIDDLE EXAMPLE (Remember to activate your icon image, I disabled it in that code.)
For further reading, I recommend self executing anonymous functions.
Cheers.
This question already has answers here:
Google Maps : Issue regarding marker icons and geocoding
(1 answer)
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
I am working on Google Maps API v3 javascript. I am using the Geocoder feature where I am passing a city name and plotting it on the map. Along with this marker, I want to add a separate info window for every marker but I am not able to do that. All the infowindows are displaying the content that was set for the last marker instead of setting a different info window for each. Please find the javascript code below:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
var jString = JSON.parse(address);
var infowindow;
for (var key in jString) {
contentStr = JSON.stringify(jString[key]); //This is step where I am setting the content which is independent for every maker
if (jString.hasOwnProperty(key)) {
geocoder.geocode( { 'address': key}, 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
});
infowindow = new google.maps.InfoWindow({
content: contentStr//Not able to access 'contentStr' set above.
});
infowindow.open(map,marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
After debugging I understood that for some reason, the value of the variable 'contentStr' being set during the last iteration of 'for' loop is only being used for all the below function calls made:
geocoder.geocode( { 'address': key}, function(results, status) {
So basically, I am not able to pass the variable 'contentStr' into the function defined in the argument of another function. I think I am missing something basic here. Could anyone please guide me about this?
Thank you!
I have had the same problem many times. Stolen from link below. You need to attach the infowindow to your marker.
Marker content (infoWindow) Google Maps
function createMarker(lat, lon, html) {
var newmarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
newmarker['infowindow'] = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(newmarker, 'mouseover', function() {
this['infowindow'].open(map, this);
});
}
A second way of doing this. :
Google Maps API V3 infoWindow - All infoWindows displaying same content
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.
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);
}
});
}
I am new with google maps api. I took some sample from the manual and trying to change it the way I need, so here is the what I am trying to do:
This is the example from google maps manual
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng( 40.714353, -74.005973);
var myOptions = {
zoom: 10,
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);
}
});
}
I have changed codeAddress function a little and trying to call it on page load like this:
function codeAddress(address) {
//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);
}
});
}
codeAddress("Some Address");
But it give me a javascript error "geocoder is undefined". How can I make the script wait until the map is loaded and then run the codeAddress function? I don't want to path my address during initialization.
I hope this is clear
Thank you in advance.
The problem is that you're calling codeAddress directly after defining it (and hence this is before the initialise() method runs.
Consequently you need to run this later on some trigger. A quick and dirty way to do this is to set this as the body's onload event; this will wait until all resources (including images) have fully loaded, but that might not be too much of a problem given that the map is an image as well.
Alternatively, most JS frameworks will give you very convenient methods to fire your handlers at various points in the page's lifecycle. If you're using one of these, you may wish to investigate the options available to you and pick the best one, which depends on a number of factors.
Critically, don't forget that you must call initialise() before you call codeAddress()!