Develop Reference

Clicking same Marker twice opens two InfoWindows

I got infowindows working, but for some reason if I click the same marker multiple clicks it opens multiple of the same infowindow. I have a feeling it has to be something with my code, but I cant quite put my finger on what it is. Any help is appreciated.
var map;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(33.6894120, -117.9872660),
mapTypeId: 'roadmap',
disableDefaultUI: true
});
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
type: feature.type,
title: feature.title,
description: feature.description
});
marker.addListener('click', function() {
map.setCenter(marker.getPosition());
var infoWindow = new google.maps.InfoWindow({
map: map,
pixelOffset: new google.maps.Size(0, -60)
});
infoWindow.setContent(marker.description);
infoWindow.setPosition(marker.position);
google.maps.event.addListener(map, 'drag', function() {
infoWindow.close();
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
});
markers.push(marker);
}
filterMarkers = function(getType) {
//console.log(getType);
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == getType || getType == "") {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type1',
description: 'Description1'
},{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type2',
description: 'Description2'
},{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type3',
description: 'Description3'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
$(document).ready(function(){
initMap();
});

If you don't want an infowindow created every time you click on the marker, don't create a new one every time you click on the marker, create one for the marker (or one for the map, if you only ever want one open), and open it in the click listener.
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
map: map,
type: feature.type,
description: feature.description
});
// create infowindow for the marker
var infoWindow = new google.maps.InfoWindow({});
marker.addListener('click', function() {
map.setCenter(marker.getPosition());
// set the content of the infowindow
infoWindow.setContent(marker.description);
// open the infowindow on the marker.
infoWindow.open(map,marker);
});
markers.push(marker);
}
proof of concept fiddle

You are creating a new InfoWindow with every marker click:
marker.addListener('click' ...
var infoWindow = *new google.maps.InfoWindow( ...*
It is expected that you get multiple instances.
If you want one InfoWindow for all markers you can follow this example
If you want to have one per each marker check out this SO answer.

Google maps marker - infowindow

I need to in InfoWindow show match.offer.text.
Each marker has a different match.offer.text.
This is my code:
var markerImageURL, lat, lng;
if (myoffer) {
markerImageURL = 'assets/img/markers/marker_my.png';
lat = match.lat;
lng = match.lng;
} else {
markerImageURL = 'assets/img/markers/marker_' + match.strength + '.png';
lat = match.offer.lat;
lng = match.offer.lng;
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: window.googleMap,
icon: {
size: new google.maps.Size(54,56),
url: markerImageURL
},
draggable: false,
visible: true
});
var infowindow = new google.maps.InfoWindow({
content: match.offer.text,
maxWidth: 300
});
window.googleMapMarkers.push(marker);
if(!myoffer) {
window.MVC.Events.GoogleMap.prototype.showInfoWindow(marker, infowindow, match);
}
Event triggered after clicking on the marker:
marker.addListener('click', function() {
infowindow.open(window.googleMap, marker);
}
Please, help me.

The content is applied to the marker on Open therefore your code will apply the content in last item in your loop to all markers, in your openWindow function add the content to a single infoWindow object i.e.
Also the Maps API has its own event wrapper for the click event
function initMarkers(){
//create markers
var marker = new google.maps.Marker();
google.maps.event.addListener(marker, 'click', openInfoWindow(marker, i));
}
var infowindow = new google.maps.InfoWindow();
function openInfoWindow(marker,index){
return function(e) {
//Close other info window if one is open
if (infowindow) {
infowindow.close();
}
var content = marker.offer.text;
infowindow.setContent(content);
setTimeout(function() {
infowindow.open(map, marker);
}, 200);
}
}

On click event google map add marker Extjs

Hello I click event Implemented but nothing hapens.I am using MVC Extjs I know how to implement in javascript for examplejsfiddle simple click event but in extjs where I should put the code I have gmappanel in window how to handle this in controller I have no idea how to do it... Help Where I should put this code:
var map = Ext.getCmp('gmapForm');
google.maps.event.addListener(map, 'click', function(e) {
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
});
here is my view with not working listeners no one works I wondered:
Ext.define('App.view.App', {
extend: 'Ext.window.Window',
alias: 'widget.appform',
title:'',
operation:'',
resizable: false,
modal:true,
initComponent: function () {
me = this;
this.autoShow = true;
this.width = 550;
this.height = 650;
this.items = [
{
xtype: 'textfield',
name: 'title',
value:me.login,
fieldLabel: 'Title',
allowBlank: false,
width:330,
style:{
marginTop:'10px',
marginLeft:'20px',
marginRight:'20px'
}
},
{
title: 'Google Map',
width:535,
height:800,
// frame:true,
id:'gmapForm',
// height: '100%',
xtype: 'gmappanel',
gmapType: 'map',
center: {
geoCodeAddr: "221B Baker Street",
marker: {
title: 'Holmes Home'
}
},
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
mapOptions : {
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
maprender: function(extMapComponent, googleMapComp){
var marker = new google.maps.Marker({
position: position = new google.maps.LatLng (42.16726190,-87.83146810),
// position: patientPosition, //patientPosition initialized in geocodePatientAddress() function in Home.js
map: googleMapComp,
animation: google.maps.Animation.DROP,
draggable: false,
title: 'Patient Location'
});
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close(googleMapComp, marker);
});
}
},
handler : function () {
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
// this.up('window').down('form').getForm().reset();
}
/* google.maps.event.addListener(gObject, "click", function(e){
alert('test');
})*/
}
];
this.buttons = [
{
text:me.operation,
name: me.operation,
scope: this
},
];
console.log(arguments);
this.callParent(arguments);
}
});
Here is my controller:
Ext.define('App.controller.AppController', {
extend: 'Ext.app.Controller',
views: [
'App.AppPanelView',
'App.AppForm'
],
stores: ['App.Apptore'],
models: ['App.AppModel'],
refs: [
{ ref: 'App', selector: 'AppForm' }
],
init: function () {
this.control({
'App button[name="Add"]':{
click:this.addPersonForm,
afterrender:this.addMapListener
}
});
},
selectedRow:null,
countryId:null,
personProfile:null,
modalImageIndex:null,
imageId:null,
avatar:"",
addMarker:function(){
console.log("aaaaaaa");
var win= Ext.widget('AppForm',{title:'Add Group',operation:'Add'});
var trafficMap = Ext.getCmp('gmapForm');
// var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32));
/*var trafficMarker = new google.maps.Marker({
position: new google.maps.LatLng(alert.lat, alert.lon),
map: trafficMap,
// icon: marker_icon,
id: 'trafficAlertIcon' *//*i*//*
});*/
/*var options = {
lat:3.951941,
lng:-102.052002,
marker: {title:"Hello World!"},
listeners: {
click: function(e){
}
}
};
console.log(trafficMap);
var lat = 3.951941,
lng = 102.052002;
var mpoint = new google.maps.LatLng(lat,lng);
trafficMap.addMarker(mpoint,options.marker,false,false, options.listeners);*/
/* google.maps.event.addListener(trafficMarker, 'mousedown', function()
{
console.log('touched marker');
*//* trafficTabPanel.layout.setActiveItem(1, {type: 'slide', direction: 'left'});
LoadIncidentMap(this.id.substring(16));*//*
});
*/
/* google.maps.event.addListener(trafficMap, "click", function (e) {
console.log('click');
//lat and lng is available in e object
// var latLng = e.latLng;
});*/
var addMarker = google.maps.event.addListener(trafficMap, 'click', function(e) {
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
console.log(lat+ " "+ lng);
// markers[markerId] = marker; // cache marker in markers object
// bindMarkerEvents(marker); // bind right click event to marker
});
addMarker;
console.log('clickaa');
//win.show();
},
addMapListener:function() {
console.log("A1");
var trafficMap = Ext.getCmp('gmapForm');
google.maps.event.addListener(trafficMap, 'click', function(e) {
console.log("A3");
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
console.log(lat+" "+lng);
// markers[markerId] = marker; // cache marker in markers object
// bindMarkerEvents(marker); // bind right click event to marker
});
console.log("A22");
var map;
// map = new google.maps.Map($('#map')[0], myOptions);
/* var myOptions = {
zoom: 7,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'roadmap'
};
google.maps.event.addListener(map, 'click', function(e) {
console.log(A2);
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
markers[markerId] = marker; // cache marker in markers object
bindMarkerEvents(marker); // bind right click event to marker
});*/
}
});
I have tried everything why extjs is stackoverflow example Where have this codes be putten

Meteor: Uncaught ReferenceError: calcRoute is not defined

I am new to Meteor and Javascript. I am creating a map that gives directions from your current location to a marker on the map. Everything seems to work except that I can't seem to call the calcRoute() function correctly. Or maybe it is defined in the wrong place.
I think I need some schooling on template helpers. Please tell me where I went wrong. Thanks.
var gmaps = {
// map object
map: null,
//direction services object
directionsService: null,
//direction services object
directionsDisplay: null,
//direction services object
stepDisplay: null,
markerArray: []
}
Template.map.helpers({
mapOptions: function() {
if (GoogleMaps.loaded()) {
if (!Geolocation.error()) {
pos = Geolocation.latLng();
}
return {
//center: new google.maps.LatLng(-25.2743, 133.7751),
center: new google.maps.LatLng(pos.lat, pos.lng),
zoom: 12,
scaleControl: false,
zoomControl: false,
mapTypeControl: false,
panControl: false,
rotateControl: true,
overviewMapControl: false,
streetViewControl: false,
};
}
},
calcRoute: function() {
//clear markers before calculating function
gmaps.clearMarkers();
console.log(this.markerArray);
// Retrieve the start and end locations and create
// a DirectionsRequest using BICYCLING directions.
var start = marker3.getPosition();
var end = document.getElementById('marketName').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.BICYCLING
};
// Route the directions and pass the response to a
// function to create markers for each step.
this.directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var warnings = document.getElementById('warnings_panel');
warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
this.directionsDisplay.setDirections(response);
gmaps.showSteps(response);
}
});
},
showSteps: function(directionResult) {
// For each step, place a marker, and add the text to the marker's
// info window. Also attach the marker to an array so we
// can keep track of it and remove it when calculating new
// routes.
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = new google.maps.Marker({
position: myRoute.steps[i].start_location,
map: map.instance
});
gmaps.attachInstructionText(marker, myRoute.steps[i].instructions);
this.markerArray[i] = marker;
}
},
attachInstructionText: function(marker, text) {
// Instantiate an info window to hold step text.
var stepDisplay = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', function() {
// Open an info window when the marker is clicked on,
// containing the text of the step.
stepDisplay.setContent(text);
stepDisplay.open(map.instance, marker);
})
google.maps.event.addListener(marker, 'click', function() {
map.instance.setZoom(14);
map.instance.setCenter(marker.getPosition());
stepDisplay.open(map.instance, marker);
})
},
clearMarkers: function() {
// First, remove any existing markers from the map.
for (var i = 0; i < this.markerArray.length; i++) {
this.markerArray[i].setMap(null);
}
// Now, clear the array itself.
this.markerArray = [];
}
});
Template.map.onCreated(function() {
GoogleMaps.ready('map', function(map) {
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map.instance);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(29.71739, -95.40183),
map: map.instance,
title: 'Rice U Farmers Market'
});
var infowindow1 = new google.maps.InfoWindow({
content: ''
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.setContent( '<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(calcRoute());">Directions from my Location</button>');
infowindow1.open(map.instance, marker1);
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(29.81063, -95.37999),
map: map.instance,
title: 'Canino\'s Produce'
});
var infowindow2 = new google.maps.InfoWindow({
content: 'Canino\'s Produce'
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map.instance, marker2);
});
var image = '/img/app/flag1.png'
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(pos.lat, pos.lng),
map: map.instance,
title: 'You are here',
icon: image
});
var rendererOptions = {
map: map.instance
}
this.directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// global flag saying we intialized already
Session.set('map', true);
})
});

You have to pass the name of the method that Meteor will call as a string;
Replace:
'<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(calcRoute());">Directions from my Location</button>');
infowindow1.open(map.instance, marker1);
with:
'<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(\'calcRoute\');">Directions from my Location</button>');
infowindow1.open(map.instance, marker1);

Googlemaps API loads slow with many markers

Im trying to load around 600 googlemap markers on page load using the function addMarker.
The page takes a lot of time to load.
Is there anything I can do to make it load faster while keep using the addMarker function?
Thanks.
var map
var myLatlng = new google.maps.LatLng(35.9531719,14.3712201);
var markerBounds = new google.maps.LatLngBounds();
var markers = {};
function HomeControl(controlDiv, map)
{
google.maps.event.addDomListener(zoomout, "click", function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0)
{
map.setZoom(currentZoomLevel - 1);
}
});
google.maps.event.addDomListener(zoomin, "click", function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21)
{
map.setZoom(currentZoomLevel + 1);
}
});
}
function initialize()
{
var googleMapOptions = {
center: new google.maps.LatLng(35.9531719,14.3712201),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
streetViewControl: false,
panControl: false,
draggable: true
};
map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
google.maps.event.addListener(map, "idle", function() {
addMarker(latitude,longitude,id,'Title','url');
});
var homeControlDiv = document.createElement("div");
var homeControl = new HomeControl(homeControlDiv, map);
}
var infowindow = new google.maps.InfoWindow({
content: ""
});
function addMarker(lat,long,id,desc,url)
{
var myIcon = new google.maps.MarkerImage("/images/pips/"+id+".png", null, null, null, new google.maps.Size(28,38));
var myLatlng = new google.maps.LatLng(lat,long);
var marker = new google.maps.Marker({
map: map,
title: desc,
position: myLatlng,
icon: myIcon,
id: id
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('' + desc + '');
infowindow.setPosition(marker.getPosition());
infowindow.open(map, marker);
});
markers[id] = marker;
markerBounds.extend(myLatlng);
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>

You can use clustering, it joins neighbor markers into one, and expand only on zoom
You can do clustering in client side, as well as server side, depending the amount of markers...
I would suggest to use server clustering if amount is more than 4000, otherwise client should look fine