Problem using Google Maps API

[jdadwilson]

I am using the Google Maps API to display multiple markers on an individual map. In all instances but one everything works as desired.

The one instance is demonstrated here... TXFannin Maps. Yes the map looks good (and it is). Even selecting the various buttons above the map works fine.

The problem occurs if a link to the right (in the Link to maps on this site group) of the map is selected and then the Menu -> Page Links -> Main Maps Page is selected to go back to the main maps page. Note that the map does not accurately display. Thus the problem.

Here is the code for initializing the map.

function init_all_map( mapType ) {
	"use strict";
	
	var myOptions = {
		center: new google.maps.LatLng(33.618000, -96.140000),
		zoom: 10,
		mapTypeId: 'roadmap', //'terrain',
		mapTypeControl: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
			position: google.maps.ControlPosition.TOP
		}
	};

	map = new google.maps.Map(document.getElementById("map_canvas_lg"), myOptions);

	var flightPlanCoordinates = [
		new google.maps.LatLng(33.73051, -96.38451),
		new google.maps.LatLng(33.33978, -96.38451),
		new google.maps.LatLng(33.40938, -95.85855),
		new google.maps.LatLng(33.82372, -95.85444),
		new google.maps.LatLng(33.83828, -95.84408)
	];
	
	var flightPath = new google.maps.Polyline( {
		path: flightPlanCoordinates,
		strokeColor: "#202020",
		strokeOpacity: 0.2,
		strokeWeight: 3
	});

	flightPath.setMap(map);

	var infoWindow = new google.maps.InfoWindow();
	var urlType = "";
	
	switch (mapType) {
		case "cem":	urlType = "files_xml/xml_cemeteries.php"; break;
		case "chu":	urlType = "files_xml/xml_churches.php"; break;
		case "mkr":	urlType = "files_xml/xml_markers.php"; break;
		case "sch":	urlType = "files_xml/xml_schools.php"; break;
		case "twn":	urlType = "files_xml/xml_towns.php"; break;
	}

	//	The URL changes depending on the mapType
	downloadUrl( urlType, function(data) {
		
    	var xml = xmlParse(data);
		var markers = xml.getElementsByTagName("marker");
		for (i = 0; i < markers.length; i++) {
			
			var type = markers[i].getAttribute("type");
			var name = markers[i].getAttribute("name");
			var lat  = markers[i].getAttribute("lat");
			var lng  = markers[i].getAttribute("lng");
			var mapPt = "";
			
			switch ( type )	{
				case "cem":	mapPt = "files_images/mis_images/icon_tri_green.png"; break;
				case "chu":	mapPt = "files_images/mis_images/icon_tri_blue.png"; break;
				case "mkr":	mapPt = "files_images/mis_images/icon_tri_gray.png"; break;
				case "sch":	mapPt = "files_images/mis_images/icon_tri_red.png";	break;
				case "twn":	mapPt = "files_images/mis_images/icon_tri_orange.png"; break;	
			}
			
			var icon = mapPt;
			var point = new google.maps.LatLng( parseFloat(lat), parseFloat(lng) );
			var html = "<b>" + name + "</b><br />Lat:&nbsp;" + lat + "&nbsp;&nbsp;Lon:&nbsp;" + lng;
			var marker = new google.maps.Marker( { map: map, position: point, title: name, icon: icon } );
			bindInfoWindow( marker, map, infoWindow, html );
		} 
	});
	return;
}

//
function bindInfoWindow( marker, map, infoWindow, html ) {
	"use strict";
	google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); } );
}

After some searching about the nature of the problem I came across a solution. The key is to replace the line...

map = new google.maps.Map(document.getElementById("map_canvas_lg"), myOptions);

with...

	if ( !map ) {
		map = new google.maps.Map(document.getElementById("map_canvas_lg"), myOptions);
	} else {
		map.setOptions( myOptions );
	}

Note: map is defined as var map = ''; outside the function.

This solves the problem on the Map.php page but causes a larger problem on another page that also uses the same initialization function. This problem is observed on the following page View All Markers.

As before this map 'initially' displays correctly. But, selecting the buttons at the top of the map does not remove and then add the new markers but rather just adds the new markers to the map.

I added the following function and tried invoking it several place but all have a initial length of 0 and thus the removal does not work.

function clearOverlays( mkrArray ) {
	'use strict';
	for (var i = 0; i < mkrArray.length; i++ ) { mkrArray[i].setMap(null); }
	mkrArray = [];
}

So, the bottom line question what do I need to do to remove the 'old' markers so that the 'new' markers are not added to the old ones.

TIA for your assistance
jdadwilson

[jscheuer1]

The page is using AJAX or some other importation/alteration code to change the map displayed. To simply go back to the original URL isn't enough of a change for the browser to reinitialize the page. There could be a more elegant solution and/or some more extreme measure(s) might be required to get the reinitialization you want in all browsers. But this worked in a Chrome like browser (indicating it has a good chance of working in any modern browser):

window.location.reload();

So you could edit the link to do that. Currently I see for that link:

<a href="" onclick="return showMain('cem')">Main Maps Page</a>

You could change that to:

<a href="" onclick="return window.location.reload();">Main Maps Page</a>

The page may need to be refreshed and/or the browser's cache cleared to see changes.