zoom_changed triggering repeatedly on page load - google-maps

Using the Google Maps API, I've got two listeners in my initMap() function:
google.maps.event.addListener(map, 'dragend', function(e) {
var searchType=location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
});
google.maps.event.addListener(map, 'zoom_changed', function(e) {
var searchType=location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
});
The first one works fine, but the second (zoom_changed) triggers several times while the page is loading, causing all kinds of chaos. How can I prevent this?
For testing purposes, I've tried changing to bounds_changed but it also triggers an extra time when the page is loading.

There must be something else causing what you describe. Just loading a map doesn't trigger a zoom change as you can see in the below example.
function initialize() {
var myLatLng = new google.maps.LatLng(46.2,6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(map, 'zoom_changed', function() {
alert('Zoom Changed');
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

I found a way to prevent the zoom_changed listener from loading until the map has finished loading:
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
google.maps.event.addListener(map, 'zoom_changed', function (e) {
// var eventListener = google.maps.event.addListener(this.map, "bounds_changed", function () {
var searchType = location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
// });
});
})

Related

"Uncaught SyntaxError: Unexpected token ," using google maps api

im using google maps javascript api. on load in calling the initialize method as said in the api, but i keep getting "Uncaught SyntaxError: Unexpected token ," error but could not find the source why im getting this error.
Please Help. Thanks in advance
<script type='text/javascript'>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922)
};
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window,'load',initialize);
</script> `
I ran the script through JSHint:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function () {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function () {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
This is now syntax-error-free. My guess is that the lines that had
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'),
mapOptions);
were causing it.
By the way, formatting your code will make it easier to identify logic errors, syntax errors, closure errors, etc.

Google Maps API - Activating the infowindow of a custom marker

I am trying to activate the infowindow for a custom marer, yielding a small description about the marker, I'm having some trouble at the moment, I have the custom marker working but I can't get the infowindow to show.
I tried calling the listener for the marker and storing it in a variable "customMarker", then calling another mouseover listener to activate the infowindow, but I'm having no luck, can anyone help me out?
var map;
//Creates a custom icon to be placed on the map
var goldStar = 'https://cdn2.iconfinder.com/data/icons/august/PNG/Star%20Gold.png';
function initialize() {
//Sets the zoom amount for the map, the higher the number, the closer the zoom amount
var mapOptions = {
zoom: 18
//center : myLatLng
};
//The map object itself
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Tries to find user location using HTML 5
if(navigator.geolocation)
{
//sets the map to the position of the user using location
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
//This listener is not working
//google.maps.event.addListener(customMarker, 'mouseover', function() {
//infowindow.open(map,customMarker);
//});
}
function placeMarker(location, map)
{
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable:true
});
map.panTo(location);
}
The google.maps.event.addListener function does not return a marker. This won't work:
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
Assign the event listener in your placeMarker function to the marker you create (also gives the advantage of maintaining function closure on the marker):
function placeMarker(location, map) {
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable: true
});
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
map.panTo(location);
}
working fiddle

google maps add single marker on click don't works

I've googled and searched deeply in stackoverflow with no results.
i have the following code:
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(45.47554, 9.204712),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(map, "click", function (event) {
alert("click");
});
</script>
and when I click on map I haven't the alert. Where am I wrong please? Thank you.
You mentioned no way to add a marker, in this case to add a marker in the map you can use following code
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
// options
});
// Add a marker at center/current latlng
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Some Title'
});
// To add a click event on the marker you can use
google.maps.event.addListener(marker, 'click', function() {
// ...
});
}
Read more.

GoogleMaps: Setting a marker on user click

Currently I'm trying to set markers on a map based on user clicks. I have tried everything I can think of and NOTHING works. It seems as though my map doesn't even detect clicks. Currently, I'm trying to keep the script as simple as possible, I'm just trying to detect clicks on the map at this point:
<script type="text/javascript">
function initialize()
{
<!-- Set the initial location-->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
</script>
I've tried so many variants on this sort of code, every it never works. If I change it to "addDomListener(window, ...)" it works, but never using the map as the listener. Ideas?
EDIT: OK, solved it by changing the function somewhat and changing its location in the script:
<script type="text/javascript">
function initialize() {
<!-- Set the initial location -->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
minZoom: 3,
zoom: 8,
maxZoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable-->
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
</script>
I guess you place this code in improper place (or do it in improper time). Recently I've encountered with the same problem and it took some time to solve it. Look what works for me:
var mapservice = {};
mapservice.map = {};
mapservice.options = {};
mapservice.putMarker = {};
mapservice.init = function (divName, textSearch)
{
this.options =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map($(divName)[0], this.options);
google.maps.event.addListener(this.map, 'click', function (event)
{
mapservice.putMarker(event.latLng);
});
}
mapservice.putMarker = function (location)
{
//...
}

Google Maps API InfoWindow not Displaying content

My Code looks like this:
var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var infobox = new google.maps.InfoWindow({
content: 'Hello world'
});
for(i in results){
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('blablabla');
infobox.open(map,marker);
alert(infobox.content); //displays 'blablabla'
});
}
}
});
Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.
Problem is: the infoWindow displays empty.
Screenshot here:
PS: Using Maps API V3
I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.
Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see:
http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
Here is how I have done it.
var map,markersArray,infowindow; //infowindow has been declared as a global variable.
function initialize(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.5001524,-0.1262362),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
markersArray = [];
}
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}
You can find the working example here and the complete javascript here.
I have resolved issue by adding below code.
setTimeout(function () { GeocodeMarker.info.open(GoogleMap,
GeocodeMarker); }, 300);
Thanks