I am displaying 10 locations on google map using the example with fitbounds.
My search page is retreiving a list on information thorough ajax/jason call and then I hide the search page and display the list and a map with first then rows locations.
All is ajax and the page itself is not posted back to the server.
It works perfect first time, displays all 10 locations on map but after i go back to search page (without posting back, just hide unhide the differen pages on client) and hit search again the map is not displaying again the 10 locations.
I coudl not find any solution to the issue.

Code is bellow:

var arr =['red_MarkerA.png', 'red_MarkerB.png', 'red_MarkerC.png', 'red_MarkerD.png', 'red_MarkerE.png', 'red_MarkerF.png', 'red_MarkerG.png', 'red_MarkerH.png', 'red_MarkerI.png', 'red_MarkerJ.png'];

function initialize(points) {

var mapObj = null;

var myOptions = {
zoom: 11,
center: new google.maps.LatLng(points[0].Latitude, points[0].Longitude),
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

if (“ProviderSearch” == GetSearchType()) {
mapObj = new google.maps.Map(document.getElementById(“map_canvas”),
myOptions);
}
else if (“HospitalSearch” == GetSearchType()) {
mapObj = new google.maps.Map(document.getElementById(“mapHospital”),
myOptions);
}

// google.maps.event.addListener(map, ‘click’, function() {
// infowindow.close();
// });

//alert(points.length);
if (points.length > 1) {
// Add markers to the map
// Set up three markers with info windows
var currentAddress = points[0].Address;
var point = new google.maps.LatLng(points[0].Latitude, points[0].Longitude);
// var marker = createMarker(point,
// ” + currentAddress + ‘ Link Map ‘,
// ‘../../content/images/’ + arr[0]);

var marker = new google.maps.Marker({
position: point,
map: mapObj,
icon: ‘../../content/images/’ + arr[0]

//zIndex: Math.round(latlng.lat() * -100000) << 3
});

var j = 1;
//alert('after arr');
var bounds = new google.maps.LatLngBounds();
bounds.extend(point);
//alert('before loop');
// Add markers to the map with info windows
for (var i = 0; i < 10 && i < points.length; i++) {

var lo = points[i].Longitude;
var la = points[i].Latitude;
//alert(points[i].Longitude + " " + points[i].Latitude + " " + points[i].FullName);
var path = '../../content/images/';

if (currentAddress != points[i].Address) {//alert('i ' + i + ' j ' + j);

var point = new google.maps.LatLng(la, lo);
bounds.extend(point);

var marker = new google.maps.Marker({
position: point,
map: mapObj,
icon: '../../content/images/' + arr[j]

//zIndex: Math.round(latlng.lat() * -100000) << 3
});

j++;
}
currentAddress = points[i].Address;
}
mapObj.fitBounds(bounds);
bounds = null;

}

}

Could you say where in my html (below) I must insert the code?

#map_canvas { width: 400px; height: 300px; }

var map;
var layer;
var tableid = 1882479;
function initialize() {
map = new google.maps.Map(document.getElementById(‘map_canvas’), {
center: new google.maps.LatLng(-30.066716983885626, -51.233367919921875),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery(“SELECT ‘ENDERECO_GOOGLE’ FROM ” + tableid);
layer.setMap(map);
}

Absolutely. It’s entirely possible. You need to attach a mouseover event to the marker and change its icon when it triggers. Then of course you probably want to change it back on the mouseout event. The code to do that looks something like this:


google.maps.event.addListener(yourMarker, 'mouseover', function(e) {
yourMarker.setIcon('url/to/bigger/icon/');
});
google.maps.event.addListener(yourMarker, 'mouseout', function(e) {
yourMarker.setIcon('url/to/normal/icon/');
});

Cheers,
Gabriel

I would like to ask to you if there’s a way to make the markers a little bigger when the mouse pointer hovers on it.

Thanks,
Daniel