I can't zoom to a marker properly.
I'm trying to switch the view to a specified marker, but can't ge tit to work.
I've tried
map.setCenter(location);
map.setZoom(20);
and
map.fitBounds(new google.maps.latLngBounds(location,location));
but in the first case, I simply get zoomed in without the center change being registered, and in the second case I get this overview over a huge area, not zoomed in at all.
Perhaps this issue could be solved by setting a timout from setcenter to setzoom, but that's an ugly hack to me, so a prettier solution would be preferred.
How do you guys do this?
Also - if the infowindow could be displayed without changing content, that would really be a plus to, but the most important thing is to zoom into the marker at the right spot, close up.
thank you very much.
The solution turned out to be
map.setZoom(17);
map.panTo(curmarker.position);
I thought I would post an answer here as people wanted some example code.
I too needed to be able to zoom in and center as soon as a marker was added to the map.
Hope this helps somebody.
function getPoint(postcode) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': postcode + ', UK'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
map.setZoom(10);
map.panTo(marker.position);
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
is this a new instance of a map object you are creating? if so you can just have an object which contains the location and zoom and then pass that object to the map when initalising it like so (taken from the Gmaps basics tutorial http://code.google.com/apis/maps/documentation/javascript/basics.html:
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
Related
I am currently stuck on getting google maps to display on a site. This worked in a dev environment after a while. I came to put this into live and thought that I would just need the API key in the src
What I have is
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API CODE HERE&callback=initMap"
async defer></script>
<script type="text/javascript">
initialize();
function initialize() {
google.maps.event.addDomListener(window, 'load', function () {
codeAddress("#Model.Postcode, #Model.Address");
});
}
var geocoder;
var map;
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 17,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// create a marker
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'Latitude: ' + results[0].geometry.location.Ya + ' Longitude :' + results[0].geometry.location.Za
});
}
});
}
But this only produces the error of
This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it.
Many thanks
You first have to obtain an API key from the website and replace it with the "MY_API CODE HERE" part
That should be working, just because we all make mistakes, are you sure you copied the API key correctly? You need to make sure the trailing '&' is still in there after you add the key.
You could also try generating another key and using that. The process for doing that is here: https://developers.google.com/maps/documentation/javascript/get-api-key#key
The following code show on a map a church and a priest:
var churchLatLng = new google.maps.LatLng(53.4, 0.14);
var mapOptions = {
center: churchLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById('myDiv'), mapOptions);
var bounds = new google.maps.LatLngBounds();
// Setting church marker
new google.maps.Marker({
position: churchLatLng,
map: myMap,
});
bounds.extend(churchLatLng);
var priestLatLng = new google.maps.LatLng(51.2,0.13);
new google.maps.Marker({
position: priestLatLng,
map: myMap
});
bounds.extend(priestLatLng);
myMap.fitBounds(bounds);
The code use both the option "center" to center the church at the center of the map, and the function "fitBounds" to fit all the markers (church and priest only in this case).
The result is that the map border is set to encompass the two markers, but the option "center" doesn't work anymore and is ignored.
What I want is setting the bounds, but at the same time showing the church at the centre of the map.
How can I accomplish this?
call myMap.fitBounds to set the bounds to show all the markers.
change the map to center where you like (on the church)
add a listener to the bounds_changed event, when that fires, check to see if the map bounds contains the priest marker, if it does, you are done.
if the priest marker is not contained by the map bounds, zoom out one level (map.setZoom(map.getZoom()-1)).
myMap.fitBounds(bounds);
google.maps.event.addListenerOnce(myMap,'bounds_changed',function() {
google.maps.event.addListenerOnce(myMap, 'center_changed', function() {
if (!myMap.getBounds().contains(priestLatLng)) {
myMap.setZoom(myMap.getZoom()-1);
}
});
myMap.setCenter(churchLatLng);
});
Try to use an eventlistener and wait for the bounds to change (it works asynchronous).
Something like:
google.maps.event.addListenerOnce(myMap, 'bounds_changed', function(event) {
myMap.setCenter(churchLatLng);
});
I have simple google map with markers.
When I create marker for example for Viet Nam I see two markers on Map (in the beginning and in the end, see screenshot).
Is there any way to show only one marker? I cannot change size or zoom of map.
Code:
function loadMap() {
var mapOptions = {
zoom: 1,
disableDefaultUI: true,
zoomControl: false,
scrollwheel: false,
center: new google.maps.LatLng(10.0, -97.2070),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
MAP = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function addMarker(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: MAP,
position: results[0].geometry.location
});
MARKERS.push(marker);
}});
}
The short answer is: No, You basically see the same icon, in the same location. because you zoomed out the map that way that you see the same land twice. it's a normal behavior. there is no logic that in one round there will be a marker and in the second there wouldn't.
You can set the minimum zoom to a larger number so you won't be able to zoom out that far. But that comes with some issues, your map will have to have a fixed width.
Look at minZoom https://developers.google.com/maps/documentation/javascript/reference#MapOptions
Otherwise I don't see how you can do that.
My problem is solved, I needed to add option "optimized: false" for markers. After this I have one marker for one place.
I am trying to use the google maps javascript API to map an address based on this example.
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
The documentation recommends the clientside javascript approach as the best way to deal with quotas on requests. So far so good. My problem is in moving from this example to my specific case. My addresses are already in a database so I don't need the user to enter one. Also I do not want the map to load with the page. Instead, I want the map for the address to load when the user clicks a link.
I have a script working that loads the map in a div using initialize (). But my problem is getting initialize to work with geocode. The geocode in the example depends on initialize loading with bodyonload which I do not want.
Here is code. Would appreciate any suggestions:
javascript
var map;
var geocoder;
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);
}
});
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
html
<input id="address" type="hidden" value="Palo Alto CA">
View map without geocoding
<div id="map_canvas" style="width:300px; height:300px;"></div>
View map of geocoded address
The only issue I had with your script was the following line in the initialize() function:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
By declaring var map, your script is just declaring a local variable named map, as opposed to using the global map variable declared at the top of your script.
By removing var, the script uses the global variable and runs fine:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Finally, to get the geocoded map to load on the link click, change onclick for your geocoded address to onclick="initialize();codeAddress();".
Added:
Try combining your initialize() and codeAddress() methods into the following:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 18,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
And then just call initialize() from your link.
Basically, what we're doing is taking the call to geocoder.geocode() that codeAddress() was performing and inside the resulting delegate, we're using results[0].geometry.location to initialize the map. This way, the temporary latlong doesn't need to be displayed.
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.