asked on

Google Mapping

GoogleM.zip

I have modified a GoogleMaps DB i found here on EE and changed it to display multiple plots for a series of Properties that we are looking to purchase. Everything works fine and now I want to plot it against properties that we already own. I would like to change the Marker color to green. This program works great for what I need to do if I can just figure out how to change the colors. The research I have done kind of infers that I need set up a GIcon and use the GMarker Options. I am not sure how to do this with the existing code. Can someone point me in the right direction or let me know if there is a simpler way to accomplish this task. The attached app can be run by just hitting the MapProperties buttion. For this purpose if I can get the Markers to be something other that default 'red' i think I am home free. Thanks in advance for any help you can give.

Tim

leakim971

Check this : http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions

Choose one here for example : http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl
(do right click on the icon and choose get URL of the image)

Add a new global variable in the Javascript code (What is a global variable?):

	var green = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/green.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32));

Open in new window

Add an icon in the options of the marker(s) : icon: green,

	oMap.addMarker = function(lat,lon,msg) {
		if (oMap.map) {
			var latlng = new google.maps.LatLng(lat,lon);
			var options = {
				icon: green,
				position: latlng,
				map: oMap.map,
				title: msg
			};
			var marker = new google.maps.Marker(options);
			oMap.markers.push(marker);
		}
	}

Open in new window

The full page :

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Map</title>
<style type="text/css">
	body { height: 100%; margin: 0px; padding: 0px; overflow: hidden }
	#map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var oMap = {
		map: null,
		markers: []
	};

	oMap.init = function() {
		if (document.getElementById) {
			var mapDiv = document.getElementById('map');
			var latlng = new google.maps.LatLng(37.09024,-95.712891)
			var options = {
				zoom: 4,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				scalecontrol: false,
				streetViewControl: true
			};
			oMap.map = new google.maps.Map(mapDiv, options);
		}
	}

	var green = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/green.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32));

	oMap.addMarker = function(lat,lon,msg) {
		if (oMap.map) {
			var latlng = new google.maps.LatLng(lat,lon);
			var options = {
				icon: green,
				position: latlng,
				map: oMap.map,
				title: msg
			};
			var marker = new google.maps.Marker(options);
			oMap.markers.push(marker);
		}
	}
	
	oMap.clearMarkers = function() {
		if (oMap.map) {
			for (var i in oMap.markers) {
				oMap.markers[i].setMap(null);
			}
			oMap.markers.length = 0;
		}
	}
	
	oMap.adjustViewPort = function() {
		if (oMap.map) {
			var bounds = new google.maps.LatLngBounds();
			for (var i in oMap.markers) {
				bounds.extend(oMap.markers[i].getPosition());
			}
			oMap.map.fitBounds(bounds);
		}
	}

	google.maps.event.addDomListener(window,'load', oMap.init);

</script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

Open in new window

Clipboard07.jpg

leakim971

http://www.benjaminkeen.com/?p=105
https://sites.google.com/site/gmapsdevelopment/

twands

ASKER

Leakim971: Thank you for the detailed explanation. I think I am starting to "See the light" with the JS code.

My next issue is: Is there some thing I can pass from my vba code to this script that with allow me to code an if statement in the JS code to either use the green marker for the new properties or use the default red if I am plotting the existing properties. I will have two buttons on my form, one for new and one for existing.

leakim971

Check if this page help : http://blog.vishalon.net/index.php/ms-access-vba-getset-javascript-variable-in-microsoft-web-browser-activex-control/

twands

ASKER

Thanks for that link, it was a great help in getting me to understand how to pass a variable to a function in JS.

I now have this code in my script.which I am loading with either "red" or "green" from vba

var sMyColor = "";

function SetJavascriptVar()
{
sMyColor = document.getElementById('hdnData').value;
document.getElementById('sMyColorValue').innerText = sMyColor;
}

I am a bit confused on the syntax on how to check on the value of this variable. In my case if the value is "green" i would want to execute the statements

oMap.addMarker = function(lat,lon,msg) {
            if (oMap.map) {
                  var latlng = new google.maps.LatLng(lat,lon);
                  var options = {
                        icon: green,
                        position: latlng,
                        map: oMap.map,
                        title: msg
                  };
                  var marker = new google.maps.Marker(options);
                  oMap.markers.push(marker);
            }
      }

else I would want to bypass them and let it default to the "red" markers

I have tried several variation of an if statement to no avail. Would a case statement be more appropriate.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

twands

ASKER

Thanks leakim971:!

This last soulution was exactly what I was looking for. Much easier than passing a variable. Plus I am much more comfortable with working in VBA. This gives me a simple way to plot all of my properties one way and also to show potential properties on the same map. Much appreciated.

twands

ASKER

Exacly what I was looking for!