Can somebody tell me is is possible to drop a pin on specific address on a map generated Google Maps v3 library? I need to send an address to script, and marker should be dropped on that address...
Thank you in advance!
if you have an address, you will need to geocode it first, then you can create the marker:
geocoder.geocode({ 'address': addressThatYouWannaDraw }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
pt = results[0].geometry.location;
var myMarkerOpts = {
position: pt,
map: map
};
var marker = new google.maps.Marker(myMarkerOpts);
}
});
map here is your google.map.Map element
Related
I'm using Google Maps API v3 to handle a map. In addition I took an input/text and an input/button to let the user look for a zip code.
The map then should center on that zipcode. And it does! But on some zip codes I come to very exotic places.
The server, client and anything else is in Germany, so I would like to lock all queries to Germany. For example if I want to center on "92224" I don't see Bavaria, I get lost in Lithuania.
I'm using the following code from this answer to center by command:
function codeAddress(zipCode) {
geocoder.geocode( { 'address': zipCode}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
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);
}
});
}
Now how can I achieve that this query only will center on German zip codes? (If it helps, German zip codes are always 5 numbers long.)
You want to setup componentRestrictions and filter by country.
See the documentation.
Example:
function codeAddress(zipCode) {
geocoder.geocode({
'address': address, "componentRestrictions":{"country":"DE"}
}, 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);
}
});
}
Demo:
JSFiddle demo
Note:
As a side note, you cannot filter by multiple countries. This is a long awaited feature that Google still didn't implement until now.
Edit: 2017-04-19
Google has now implemented a way to filter by up to 5 countries: see https://issuetracker.google.com/issues/35821685 I will not make any comment about how much useful this is...
This question might be answered in other posts, but I haven't found the specific answer and I'm having trouble discerning how to logically think through this. I have a site where each post has an address. On each post page I've used the Google Maps API to translate the address into a map location and to show a map with a pin at that address. Works great.
What I need to do now is to show a map at the top of my archive/category/etc pages (pages with a list of posts generated by a query and a loop) and to list a pin for every post that shows up in that particular query. I also need the map to automatically resize to show all of the pins, and not show extraneous map outside of the pins boundaries.
The way it seems that this would happen is that I could create the markers with a script that's inside the loop, so that each time the loop runs, it would generate a new marker and add it to the map.
Another possible method that seems like it has potential would be to add the location to an array for each turn of the loop, and then show the array of pins when the loop is done.
Can anyone give me some advice on how to accomplish this? At this point I'm using the following code which gives me a map and the location of the last post in the list generated by the loop. This code is outside of the loop. I need to know which part I should move inside the loop, and how to adjust it so that I won't simply rewrite the marker during every iteration of the loop.
<script type="text/javascript">
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 3,
}
var myAddress = document.getElementById('theAddress');
var address = myAddress.textContent;
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);
}
});
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You need to add markers in a loop. this was taken from a project i was working.
var locations = ["Denver, CO, United States"];
var markers = [];
var iterator = 0;
for (var i = 0; i < locations.length; i++) {
setTimeout(function() {
geocoder.geocode({'address': locations[iterator]}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
animation: google.maps.Animation.DROP
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
log('Geocode was not successful for the following reason: ' + status);
}
});
iterator++;
}, i * 250);
}
I am new in Javascript and google map api and I have been follow this link to remove a marker but some how I cannot make it work.
Basically I want to use a button to generate the marker when user enter an address and click on the button. When the user enter a new address and click on the button again, the old marker will be removed and the new marker pin on the new address. The marker also draggable.
Here is my js code:
$('#geocode').live('click',function() {
codeAddress();
return false;
});
function codeAddress() {
var address = document.getElementById('location').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (marker) marker.setMap(null);
if (marker) delete marker;
var marker = new google.maps.Marker({
draggable:true,
map: map,
position: results[0].geometry.location
});
var newlat = results[0].geometry.location.lat();
var newlng = results[0].geometry.location.lng();
document.getElementById('mwqsflatlng').value = (newlat+' , '+newlng);
draggeablemarker(marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Update
When I check on the inspect element, it gave me this error:
Uncaught TypeError: Cannot call method 'setMap' of undefined
You need to have a reference to your marker object to be able to access it at a later time. If you want to restrict the map to one marker showing at a time you can update the markers Position property instead of deleting and recreating it.
Here is a function that can change the markers position or create a new marker if one does not exist on the map. The location parameter is a Google LatLng object which is the same as the object returned by the Geocoder results[0].geometry.location.
Notice the marker variable is defined outside of the function scope. This is what allows you to refer to the marker at a later time.
var marker;
function placeMarker(location) {
if (marker) {
//if marker already was created change positon
marker.setPosition(location);
} else {
//create a marker
marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
}
}
So for your geocode success function you should only have to pass the result to this function.
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
placeMarker(results[0].geometry.location);
}
...
Here is a fiddle of of the concept. You can click on the map and the marker will move to the desired location.
I'm using Google Maps api v. 3 in my website. What I want to implement is the following flow:
User is presented a form where he enters an address (of some kind - city, street, etc).
After the form is filled, a map is presented to him, showing him the map centered to the address he entered. Then he can enter a keyword to search against google places in the area of the map.
What I'm stopped at is the translation of the address to map. As I understand the v3 API, I should initialize the map with LatLng center position - but having a city name or so I can't do it just yet. I need some kind of translation between the textual address and coordinates - it's what Google Maps are doing when I search for "Beverly Hills" for example. Some kind of reverse, I guess? How should I do it in the javascript API?
Or is there an option to include a search bar inside the v3 embedded map?
You need to use geocode something like below
Copied from http://code.google.com/apis/maps/documentation/javascript/geocoding.html
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
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);
}
});
}
And then you will need to call codeAddress() function on your button click
You can use the Google Maps v3 Geocoding API for translating an address to a lat/lon pair. After this you can use that data to initialize the map.
I am trying to reverse geocode the latitude and longitude of my google maps and show the formatted address of the markers current position in a window when I have finished dragging the marker with dragend.
So far I have managed to get the window updating on dragend and displaying the longitude and latitude of it's current position but I am unable to display the address using reverse geocode.
I have followed the demo on the site and tried to implement it but can;t get it to work.
This is my code:
google.maps.event.addListener(marker, "dragend", function (event) {
var point = marker.getPosition();
map.panTo(point);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
infowindow.setContent('<div><strong>' + marker.getPosition() + '</strong><br>' + address);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({latLng: event.latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
infoWindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
try with
geocoder.geocode({latLng: point}, function(results, status) {
example