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.
Related
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 use jquery.ui.map to load markers on google map, and this is part of my code:
var ip = new google.maps.LatLng(lat, longt);
var mapOptions = {
zoom: 4,
center: ip,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#map_canvas').gmap(mapOptions);
var marker = $('#map_canvas').gmap('addMarker', {
'position': ip,
'bounds': true,
'title':'Your location'
});
While the map is loading I can see the markers, but when everything are loaded the markers disappear and no marker is shown on the map, while we have them, if you take a look at this screen shot you will see that we have the marker (because we can see the marker title when we hover on it) but we cannot see it...
Screen shot: http://s15.postimg.org/5zlsbxwhn/scmap.jpg
The Demo page: http://bev.dev.beardo.co/encontre/
You have to use marker.setMap(map)
I have a nice example on github
I am new to Google Maps API and I have the Google Map below working. However, I am having a hard time understanding how to set an address. I have 2,000 entries that each include an address stored in a database and I have all the data needed to 'set' the address for the map onLoad of the description page, given the opportunity. However, I am not sure how to do this. I was wondering if someone can show me a basic example of setting the address, city, state, zip and then having a marker on the map as well.
In addition, I am confused as to, if I have all the components of the address separated, I am not required to geocode, correct? Doesn't geocode just make it easy to create a map from an unparsed / long address string and puts a limitation on the number of times you can request a geocode? In other words, if I have all the address components (such as zip, city, state, address, etc) stored in a DB, then can't I set an address without being constrained by google maps geocoding limitations?
Following address:
123 Flower Street, Miami, Florida 32826
My JS so far...
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
I appreciate any suggestions!
Many thanks in advance!
You are looking for geocoding: https://developers.google.com/maps/documentation/geocoding/
Here you have code which query google for a location of your address and then point a marker on received position:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': "123 Flower Street, Miami, Florida 32826" }, 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("Problem with geolocation");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have this js code to render my map :
function loadMap(address)
{
console.log(address);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ "address": address }, function (results, status)
{
var pos = new google.maps.LatLng(53.681602, -1.911672); // default.
if (status === google.maps.GeocoderStatus.OK) {
pos = results[0].geometry.location;
} else {
alert("Error : Unable to locate!");
}
console.log(pos);
var mapOptions = {
center: pos,
zoom: 10,
zoomControl: true,
zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP },
mapTypeControl: false,
panControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: pos,
animation: google.maps.Animation.DROP
});
});
}
Problem is first time it executes the map shows fine, but the 2nd time, the postcode is still the same, the lat/long come out the same yet the map shows partially, with only about a 1/4th of it showing in the top-left of the div.
Anything I am doing incorrectly?
EDIT:
After jterrys suggestions it still looks the same :
HTML/CSS :
#mapCanvas
{
width: 655px;
height: 472px;
border: 1px solid #ccc;
}
<div id="mapCanvas"></div>
I am using JQuery 2.0, I have also had this before when I was using <2.0
Set up the mapoptions and map just once, outside of the geocode callback - then update the marker instead of recreating the entire map.
Fiddle showing one geocode, then another, and back to the first... div positioning looks normal.
Per the updated question, This Fiddle waits for the actual activation of the second tab before rendering the map... I had the exact same issue when creating my tabbed map.
$("#two").click(function() {
init();
}
This could be much more robust and tie into the tabs events that are fired when users interact with them, but this quick example illustrates the solution.
As a side bonus, this also conserves the resources needed to display the map (as well as any quota) until the user actually activates the tab!
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);
}