Develop Reference

Leaflet : marker icons and markerCluster displaying together on the map with fetch

I am using Leaflet on my project. I work with PHP / Symfony, I retrieve the data from the Controller via fetch to display the markers on the map.
All markers are displayed on the map, but when using the markerCluster, markers that have close coordinates on the map (eg: same city) do not group together in clusters. The markers farther apart from each other group well together.
Have you an idea why ? Thanks
I am adding screens to you so that you can better understand :)
map.js
let iconPicture = L.icon({
iconUrl: "/assets/images/cycling.png",
iconSize: [20, 20],
popupAnchor: [0, -10],
});
function initMap() {
var map = L.map("mapId").setView([48.833, 2.333], 12);
var osmLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
minZoom: 3,
maxZoom: 19,
});
var markersGroup = L.markerClusterGroup({
disableClusteringAtZoom: 13,
spiderfyOnMaxZoom: false,
removeOutsideVisibleBounds: true,
});
fetch("/api/map")
.then((response) => {
return response.json();
})
.then((result) => {
result.forEach((element) => {
var cluster = L.marker([element.latitude, element.longitude], {
icon: iconPicture,
})
// Nous ajoutons la popup. A noter que son contenu peut être du HTMl
.bindPopup(
function (layer) {
return (
"<span>" +
element.name +
"</span>" +
"<br>" +
"<div class='img-hover-zoom'>" +
"<a href=" +
"/collection50_60/" +
element.id +
">" +
"<img class='picturePopup' src=/assets/images/uploads/" +
element.pictureFront +
">" +
"</a>" +
"</div>" +
"<br>" +
element.city +
"<br>" +
"<a href=" +
"/collection50_60" +
">" +
element.years +
"</a>"
);
},
{ className: "pop-up-leaflet", direction: "top" } //then add your options
)
.addTo(map);
markersGroup.addLayer(cluster);
});
map.addLayer(markersGroup);
})
.catch(() => console.error("error"));
}
window.onload = function () {
initMap();
};

That is just because you add your Markers (variable cluster) to both the map and the MarkerClusterGroup.
Simply add them only to MCG and let the latter handle everything.
var cluster = L.marker(latLng, options)
.bindPopup()
//.addTo(map); <= do not add your Marker directly to the map
markersGroup.addLayer(cluster); // <= let the MCG handle everything

Mapbox Javascript API function event call order

I am only attaching the script tag. Below is the flow of events that happen and the problem I see. I would appreciate any suggestions/advice.
I trigger the businessGeocoder by searching for an address, which triggers the businessAddress function inside the initialize function, which in turn triggers the businessLocationClickInfo function. This works perfectly.
Without refreshing the page I decide to use the employeeResidenceGeocoder by searching for an address, which triggers the employeeResidenceAddress function inside the initialize function, which in turn triggers the employeeResidenceLocationClickInfo function. This works perfectly. too.
Again, without refreshing the page I decide to use the businessGeocoder again by searching for an address, which triggers the businessAddress function inside the initialize function, which in turn SHOULD trigger the businessLocationClickInfo function, but instead, it triggers the employeeResidenceLocationClickInfo function. The employeeResidenceLocationClickInfo function, while it should have not been called, returns the correct data. I am having a hard time understanding why it is being called instead of the businessLocationClickInfo function.
Please note that doing it the other way, using employeeResidenceGeocoder first and then businessGeocoder, and then back to employeeResidenceGeocoder causes the same problem.
Update>> I ran console logs after each line and found out that because the click events are called in the initialize function, every time I click on the map both businessLocationClickInfo and employeeResidenceLocationClickInfo are being called, one replacing the other output div, whereas I want to only call one of them, depending on the geocoder. But I still haven't found a way/order to fix it.
<script>
var map;
var businessGeocoder;
var employeeResidenceGeocoder;
var businessLocationClickFeature;
var employeeResidenceLocationClickFeature;
var screenPoint;
var address;
var geocodeFeature;
var geocodePopup;
var geocodeCensusTract;
var geocodeCensusBlockGroup;
var businessLocationPolygon;
var employeeResidenceLocationPolygon;
function initialize() {
businessGeocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
flyTo: {
speed: 100
},
zoom: 17,
placeholder: "Search for a business location",
mapboxgl: mapboxgl
})
employeeResidenceGeocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
flyTo: {
speed: 100
},
zoom: 17,
placeholder: "Search for an employee's residence",
mapboxgl: mapboxgl
})
// // // adds geocoder outside of map (inside of map would make it a 'map control')
// document.getElementById('geocoder1').appendChild(businessGeocoder.onAdd(map));
// document.getElementById('geocoder2').appendChild(employeeResidenceGeocoder.onAdd(map));
map.addControl(businessGeocoder);
map.addControl(employeeResidenceGeocoder);
businessGeocoder.on('result', businessAddress);
employeeResidenceGeocoder.on('result', employeeResidenceAddress);
}
function businessAddress (obj) {
address = obj.result.place_name;
$(".geocode-result-area").html('<b>Geocoded Business Address: </b>' + address + '<br/><div class="medium-font">Click the blue address pin on the map for updated results.</div>');
$(".geocode-click-result-area").html("");
map.on('click', businessLocationClickInfo);
}
function employeeResidenceAddress (obj) {
address = obj.result.place_name;
$(".geocode-result-area").html('<b>Geocoded Employee Residence Address: </b>' + address + '<br/><div class="medium-font">Click the blue address pin on the map for updated results.</div>');
$(".geocode-click-result-area").html("");
map.on('click', employeeResidenceLocationClickInfo);
}
function businessLocationClickInfo (obj) {
businessLocationClickFeature = map.queryRenderedFeatures(obj.point, {
layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk','businesslocation']
});
if (businessLocationClickFeature.length == 3) {
$(".geocode-click-result-area").html('<br/>This area meets the <span style="background-color:yellow">business location criteria</span> based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>' + businessLocationClickFeature[2].properties.Inquiry1 + '</td></tr>'
+ '<tr><td>CT & BG Poverty Rate ≥ 20%</td><td>' + businessLocationClickFeature[2].properties.Inquiry2 + '</td></tr></table>'
+ '<p><b>' + businessLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ businessLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ businessLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+'<table><tr><th></th><th>Poverty Rate</th></tr><tr><td>CT '
+ businessLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ businessLocationClickFeature[0].properties.PovRate + "%" + '</td></tr><tr><td>BG '
+ businessLocationClickFeature[1].properties.BLKGRPCE + '</td><td>'
+ businessLocationClickFeature[1].properties.PovRate + "%" + '</td></tr></table>'
);
}
else {
$(".geocode-click-result-area").html('<br/> This area <u style = "color:red;">does not</u> meet the business location criteria based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>No</td></tr>'
+ '<tr><td>CT & BG Poverty Rate ≥ 20%</td><td>No</td></tr></table>'
+ '<p><b>' + businessLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ businessLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ businessLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+ '<table><tr><th></th><th>Poverty Rate</th></tr><tr><td>CT '
+ businessLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ businessLocationClickFeature[0].properties.PovRate + "%" + '</td></tr><tr><td>BG '
+ businessLocationClickFeature[1].properties.BLKGRPCE + '</td><td>'
+ businessLocationClickFeature[1].properties.PovRate + "%" + '</td></tr></table>'
);
}
}
function employeeResidenceLocationClickInfo (obj) {
employeeResidenceLocationClickFeature = map.queryRenderedFeatures(obj.point, {
layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk','employeeresidencelocation']
});
if (employeeResidenceLocationClickFeature.length == 3) {
$(".geocode-click-result-area").html('<br/>This area meets the <span style="background-color:yellow">employee residence location criteria</span> based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>' + employeeResidenceLocationClickFeature[2].properties.Inquiry1 + '</td></tr>'
+ '<tr><td>CT % LMI ≥ 70%</td><td>' + employeeResidenceLocationClickFeature[2].properties.Inquiry2 + '</td></tr>'
+ '<tr><td>CT & all BG Poverty Rate ≥ 20%</td><td>' + employeeResidenceLocationClickFeature[2].properties.Inquiry3 + '</td></tr></table>'
+ '<p><b>' + employeeResidenceLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ employeeResidenceLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ employeeResidenceLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+ '<table id="CensusTable"><tr><th></th><th>Poverty Rate</th><th>LMI</th></tr><tr><td>CT '
+ employeeResidenceLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.PovRate + "%" + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.LMIPerc + "%" + '</td></tr>');
var BGsin20PovertyCT = map.queryRenderedFeatures(
{ layers: ['blockgroups-4332-9mehvk'],
filter: ["==", "TRACTCE", employeeResidenceLocationClickFeature[0].properties.TRACTCE]
});
var unique = [];
var distinct = [];
for (let i = 0; i < BGsin20PovertyCT.length; i++ ){
if (!unique[BGsin20PovertyCT[i].properties.BLKGRPCE]){
distinct.push(BGsin20PovertyCT[i]);
unique[BGsin20PovertyCT[i].properties.BLKGRPCE] = 1;
}
}
for (let i = 0; i < distinct.length; i++ ){
$("#CensusTable").append('<tr><td>BG ' + distinct[i].properties.BLKGRPCE + '</td><td>'
+ distinct[i].properties.PovRate + "%" + '</td><td>-</td></tr></table>'
);
}
}
else {
$(".geocode-click-result-area").html('<br/> This area <u style = "color:red;">does not</u> meet the employee residence location criteria based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>No</td></tr>'
+ '<tr><td>CT % LMI ≥ 70%</td><td>No</td></tr>'
+ '<tr><td>CT & all BG Poverty Rate ≥ 20%</td><td>No</td></tr></table>'
+ '<p><b>' + employeeResidenceLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ employeeResidenceLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ employeeResidenceLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+ '<table id="CensusTable"><tr><th></th><th>Poverty Rate</th><th>LMI</th></tr><tr><td>CT '
+ employeeResidenceLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.PovRate + "%" + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.LMIPerc + "%" + '</td></tr>');
var BGsin20PovertyCT = map.queryRenderedFeatures(
{ layers: ['blockgroups-4332-9mehvk'],
filter: ["==", "TRACTCE", employeeResidenceLocationClickFeature[0].properties.TRACTCE]
});
var unique = [];
var distinct = [];
for (let i = 0; i < BGsin20PovertyCT.length; i++ ){
if (!unique[BGsin20PovertyCT[i].properties.BLKGRPCE]){
distinct.push(BGsin20PovertyCT[i]);
unique[BGsin20PovertyCT[i].properties.BLKGRPCE] = 1;
}
}
for (let i = 0; i < distinct.length; i++ ){
$("#CensusTable").append('<tr><td>BG ' + distinct[i].properties.BLKGRPCE + '</td><td>'
+ distinct[i].properties.PovRate + "%" + '</td><td>-</td></tr></table>'
);
}
}
}
mapboxgl.accessToken = 'pk.eyJ1Ijoia3l1bmdhaGxpbSIsImEiOiJjanJyejQyeHUyNGwzNGFuMzdzazh1M2k1In0.TcQEe2aebuQZ4G7d827A9Q';
map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/kyungahlim/ckd226uao1p7i1iqo8ag2ewmu',
center: [-95.925, 29.575],
zoom: 7
});
map.on('load', initialize);
// // Center the map on the coordinates of any clicked symbol from the 'symbols' layer.
// map.on('click', 'symbols', function(e) {
// map.flyTo({
// center: e.features[0].geometry.coordinates
// });
// });
// // Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
// map.on('mouseenter', 'symbols', function() {
// map.getCanvas().style.cursor = 'pointer';
// });
// // Change it back to a pointer when it leaves.
// map.on('mouseleave', 'symbols', function() {
// map.getCanvas().style.cursor = '';
// });
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-95.925, 29.575]
},
properties: {
title: 'Mapbox',
description: 'Washington, D.C.'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.414, 37.776]
},
properties: {
title: 'Mapbox',
description: 'San Francisco, California'
}
}]
};
// // geocode the typed-in address, zoom to the location, and put a pin on address
// function codeAddress() {
// sAddress = document.getElementById('inputTextAddress').value;
// geocoder.geocode( { 'address': sAddress}, function(results, status) {
// //latitude = results[0].geometry.location.lat();
// //longitude = results[0].geometry.location.lng();
// coordinate = results[0].geometry.location;
// if (status == google.maps.GeocoderStatus.OK) {
// if (GeocodeMarker){
// GeocodeMarker.setMap(null);
// }
// // bounds.extend(results[0].geometry.location);
// // PuppyMap.fitBounds(bounds);
// PuppyMap.setCenter(results[0].geometry.location);
// PuppyMap.setZoom(14);
// GeocodeMarker = new google.maps.Marker({
// map:PuppyMap,
// position: results[0].geometry.location,
// animation: google.maps.Animation.DROP,
// icon: housePin,
// zoom: 0
// });
// }
// else{
// alert("Geocode was not successful for the following reason: " + status);
// }
// });
// }
var marker = new mapboxgl.Marker(document.createElement('div'))
.setLngLat( [-95.925, 29.575])
.addTo(map);
// // add markers to map
// geojson.features.forEach(function(marker) {
// // create a HTML element for each feature
// var el = document.createElement('div');
// el.className = 'marker';
// // make a marker for each feature and add to the map
// new mapboxgl.Marker(el)
// .setLngLat(marker.geometry.coordinates)
// .addTo(map);
// });
</script>

Trouble passing JSON data into embedded map

I'm trying to build a page that will display several points on a map, each representing a scheduled event with a Title, location, date, link, and description. For the map itself, I'm using the maplace plugin (http://maplacejs.com), and the events are being stored in a .json file. Currently, I get no errors in the log, and the map appears on page load, but the points don't appear. Here's the relevant code:
data.json
{ "allEvents": [
{
"eventName" : "Event #1",
"eventDate" : "May 27, 2014",
"lat": "52.963619",
"long": "-125.619140",
"link": "http://www.google.com"
"description" : "short description"},
]}
in my header script
var eventLocations = [];
$.getJSON('data.json', function(events) {
for (var i in data.allEvents) {
var name = data.allEvents[i].eventName;
var date = data.allEvents[i].eventDate;
var latitude = data.allEvents[i].lat;
var longitude = data.allEvents[i].long;
var link = data.allEvents[i].link;
var desc = data.allEvents[i].description;
var loc = "{ lat: " + latitude + "," +
"lon: " + longitude + "," +
"icon: images/icon3.png," +
"title: " + name + "," +
"html: <div class='infoWindow'>" +
"<h3>" + name + "</h3>" +
"<h4>" + date + "</h4>" +
"<a href='http://" + link + "' target='_blank'>view website</a>" +
"<p>" + desc + "</p>" +
"</div> },";
eventLocations.push(loc);
};
});
and
$(function() {
var maplace = new Maplace({
//I have lots of other parameters here (controls, stylers, options, etc)
locations: [ eventLocations ]
});
maplace.Load();
It's also worth mentioning that if I write out one location in the Maplace (i.e. in place of the 'eventLocations' variable, the pin shows up fine.
Thanks in advance!

Uncaught ReferenceError: google is not defined (Wordpress)

Below is the code I am working with. I'm trying to fix an error with a map not displaying in all browsers.
In dev tools (chrome), I'm getting a Uncaught ReferenceError: google is not defined error.
$(document).ready(function(){
//google map
function loadGoogleMap() {
var mapOptions = {
scrollwheel: false,
zoom: 14,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map($("#map")[0], mapOptions);
var bounds = new google.maps.LatLngBounds();
var count = 0;
$.each(dealers, function(ind,dealer){
var point = new google.maps.LatLng(dealer.lat,dealer.lng)
var marker = new google.maps.Marker({
position: point,
map: map,
title: dealer.post_title,
icon: icons[count]
});
var infowindow = new google.maps.InfoWindow({
content:'<div class="infowindow">'+
'<strong>' + dealer.post_title + '</strong><br/>' +
'<address>' +
dealer.address1 + '<br/>' +
dealer.city + ', ' + dealer.state + '<br/>' +
'</address>' +
dealer.phone + '<br/>' +
(dealer.url != '' ? 'Dealer Website<br/>' : '') +
(dealer.email != '' ? 'Email Dealer<br/>' : '') +
'Get Directions'+
'</div>'
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
// add event listener to distributor list
$('#distributors-list li:eq(' + count + ')').click(function(){
infowindow.open(map,marker);
});
bounds.extend(point);
count++;
});
map.fitBounds(bounds);
}
loadGoogleMap();
// reuse fancybox loading icon script
var loadingTimer, loadingFrame = 1;
var locator_animate_loading = function() {
locatorLoading = $('#ajax-loading-overlay');
if (!locatorLoading.is(':visible')){
clearInterval(loadingTimer);
return;
}
$(locatorLoading).css('background-position', '0 ' + (loadingFrame * -40) + 'px');
loadingFrame = (loadingFrame + 1) % 12;
};
$('form.distributor-search').submit(function(e){
locatorLoading = $('#ajax-loading-overlay');
locatorLoading.show();
loadingTimer = setInterval(locator_animate_loading, 66);
$('#locator-content').load(site_url + '/graceports/find-a-distributor?ajax=1&address=' + encodeURIComponent($('#address_search').val()) + ' #ajax-contents', function() {
// load updated list of dealers
$('#locator-content').append('<script src="' + site_url + '/js/dealers.php?address=' + encodeURIComponent($('#address_search').val()) + '"></script>');
loadGoogleMap();
locatorLoading.hide();
});
e.preventDefault();
});
navigator.geolocation.getCurrentPosition(function(position){
$.get(site_url + '/cms/wp-content/themes/grace/inc/latlng-to-zip.php?latlng=' + encodeURIComponent(position.coords.latitude + ' ' + position.coords.longitude), function(data){
$('#address_search').val(data);
$('form.distributor-search').trigger('submit');
});
});
});

You need to wait until google has loaded before running your scripts. Put this somewhere in your document:
$(document).ready(function(){
//google map
function loadGoogleMap() {
var mapOptions = {
scrollwheel: false,
zoom: 14,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map($("#map")[0], mapOptions);
var bounds = new google.maps.LatLngBounds();
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
'callback=initialize';
document.body.appendChild(script);
}
var count = 0;
$.each(dealers, function(ind,dealer){
var point = new google.maps.LatLng(dealer.lat,dealer.lng)
var marker = new google.maps.Marker({
position: point,
map: map,
title: dealer.post_title,
icon: icons[count]
});
var infowindow = new google.maps.InfoWindow({
content:'<div class="infowindow">'+
'<strong>' + dealer.post_title + '</strong><br/>' +
'<address>' +
dealer.address1 + '<br/>' +
dealer.city + ', ' + dealer.state + '<br/>' +
'</address>' +
dealer.phone + '<br/>' +
(dealer.url != '' ? 'Dealer Website<br/>' : '') +
(dealer.email != '' ? 'Email Dealer<br/>' : '') +
'Get Directions'+
'</div>'
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
// add event listener to distributor list
$('#distributors-list li:eq(' + count + ')').click(function(){
infowindow.open(map,marker);
});
bounds.extend(point);
count++;
});
map.fitBounds(bounds);
}
loadGoogleMap();
// reuse fancybox loading icon script
var loadingTimer, loadingFrame = 1;
var locator_animate_loading = function() {
locatorLoading = $('#ajax-loading-overlay');
if (!locatorLoading.is(':visible')){
clearInterval(loadingTimer);
return;
}
$(locatorLoading).css('background-position', '0 ' + (loadingFrame * -40) + 'px');
loadingFrame = (loadingFrame + 1) % 12;
};
$('form.distributor-search').submit(function(e){
locatorLoading = $('#ajax-loading-overlay');
locatorLoading.show();
loadingTimer = setInterval(locator_animate_loading, 66);
$('#locator-content').load(site_url + '/graceports/find-a-distributor?ajax=1&address=' + encodeURIComponent($('#address_search').val()) + ' #ajax-contents', function() {
// load updated list of dealers
$('#locator-content').append('<script src="' + site_url + '/js/dealers.php?address=' + encodeURIComponent($('#address_search').val()) + '"></script>');
loadGoogleMap();
locatorLoading.hide();
});
e.preventDefault();
});
navigator.geolocation.getCurrentPosition(function(position){
$.get(site_url + '/cms/wp-content/themes/grace/inc/latlng-to-zip.php?latlng=' + encodeURIComponent(position.coords.latitude + ' ' + position.coords.longitude), function(data){
$('#address_search').val(data);
$('form.distributor-search').trigger('submit');
});
});
});

Increase Google Map Info Window Size

I have a google map.
And there's an information window.
Now the size is standard and there r loads of texts inside.
So, my boss asked me to increase it.
We are useing ektron CMS and thus I need to go into ektron workarea and edit map.js
Even if it is ektron, it is still using google map.
I managed to find out which part is displaying as info window.
This is the part of code where info window pops up and display information inside.
marker = new GMarker(point, icon);
var infoWindow = map.getInfoWindow();
GEvent.addListener(marker, "mouseover", function () {
if (EMap.SearchData != 'content') {
if (qlink && qlink.length > 0) {
_userTB = '<span>' + title + '</span>';
}
else {
_userTB = title;
}
var theHtml1 = '<div id="IW_' + markerid + '" style="overflow:auto;width:240px;height:100px;">' + markerid + '. ' + _userTB + _summarytxt + '<br/>' + EGlobal.Format(EMap.Geolocation, new Array('javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'to\');', 'javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'from\');')) + '</div>';
map.openInfoWindowHtml(theHtml1);
}
else {
var theHtml2 = '<div id="IW_' + markerid + '" style="overflow:auto;width:240px;height:100px;">' + markerid + '. <span><b>' + title + '</b></span><br/>' + _summarytxt + '<br/>' + EGlobal.Format(EMap.Geolocation, new Array('javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'to\');', 'javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'from\');')) + '</div>';
marker.openInfoWindowHtml(theHtml2);
}
});
I try to search on google and found out that this is how a guy tried to change the info window size.
var infoWindow = map.getInfoWindow();
var point = new GLatLng(0,0);
var marker = new GMarker(point);
GEvent.bind(marker,”click”,marker,function() {
map.openInfoWindowHtml(this.getPoint(),this.address,{onOpenFn:function(){
infoWindow.reset(this.getPoint(),infoWindow.getTabs(),new GSize(200,200),null,null);
}});
});
The full article is on this site.
But I cannot merge them into 1.
especially that guy is using map.openInfoWindowHtml() with 3 parameters and ektron is using marker.openInfoWindowHtml() with only one parameter.
Any idea how to get this done? Tkz a lot.
And.. I am very new to google map. So, forgive me if my question is wasting your time.

Maybe this answer is too simple but did you allready tried to edit this line in the openInfoWindowHTML() call?
style="overflow:auto;width:240px;height:100px;">