Results 1 to 2 of 2

Thread: Problem using Google Maps API

  1. #1
    Join Date
    Feb 2013
    Location
    California
    Posts
    86
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default Problem using Google Maps API

    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.

    Code:
    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...

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

    Code:
    	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.

    Code:
    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    window.location.reload();
    So you could edit the link to do that. Currently I see for that link:

    Code:
    <a href="" onclick="return showMain('cem')">Main Maps Page</a>
    You could change that to:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 0
    Last Post: 02-07-2012, 08:47 AM
  2. Google Maps
    By frankym in forum JavaScript
    Replies: 2
    Last Post: 02-03-2010, 05:05 AM
  3. Google Maps API :: Help Needed
    By cancer10 in forum Other
    Replies: 2
    Last Post: 10-15-2009, 07:08 AM
  4. help with JS and google maps
    By puremetal in forum JavaScript
    Replies: 0
    Last Post: 05-15-2007, 10:30 AM
  5. Google maps
    By Maestre in forum JavaScript
    Replies: 1
    Last Post: 03-26-2007, 06:28 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •