To start off I’m fairly new to Javascript and the Google Maps API so any help will be greatly appreciated.
I’m building a map with polygons to mark boundary locations and the ability to search an address to see what polygon the address is in. The code works for both Firefox and Chrome, but for some reason when I try to search an address in IE, the map just reloads rather than placing the marker at the appropriate location.
I’ve included all the functions I use. The microajax Javascript function is used to read the xml file that contains the coordinates of all the polygon shapes. Since the polygons are being rendered in IE, I dont believe this is the cause of the problem so I didnt include it. I’m at a loss for what the problem could be. Thanks in advance.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="microajax.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 30px; padding: 0px }
#map_canvas { height: 100% }
</style>
<div id="map_canvas" style="width:800px; height:600px" text="If map is not present, this browser does not support Google Maps"></div>
<div id="message"></div>
<form onsubmit="showAddress()" action="#">
<input id="search" size="60" type="text" value="" />
<input type="submit" value="Go!" />
<input type="button" onclick="clearmarkers();" value="Clear markers" />
</form>
</head>
<body onload="initialize()">
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type="text/javascript">
var gmarkers = [];
var polys = [];
var labels = [];
var glob;
var geo = new google.maps.Geocoder();
var map;
function initialize() {
var ontario = new google.maps.LatLng(50.397, -85.644);
var myOptions = {
zoom: 5,
center: ontario,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
microAjax("xmloutput2.xml", function(data) {
// ========= processing the polylines ===========
var xmlDoc = xmlParse(data)
var lhins = xmlDoc.documentElement.getElementsByTagName("lhin");
// read each line
for (var a = 0; a < lhins.length; a++) {
var label = lhins[a].getAttribute("name");
var colour = lhins[a].getAttribute("colour");
// read each point on that line
var points = lhins[a].getElementsByTagName("point");
var pts = [];
for (var i = 0; i < points.length; i++) {
pts[i] = new google.maps.LatLng(parseFloat(points[i].getAttribute("lat")), parseFloat(points[i].getAttribute("lng")));
}
var poly = new google.maps.Polygon({
paths:pts,
strokeColor:"#000000",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: colour,
fillOpacity: 0
});
poly.setMap(map);
polys.push(poly);
labels.push(label);
}
function showAddress() {
var search = document.getElementById("search").value;
geo.geocode( { 'address': search}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// How many results were found
document.getElementById("message").innerHTML = "Found " +results.length +" results";
// Loop through the results, placing markers
for (var i=0; i<results.length; i++) {
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
gmarkers.push(marker);
glob=checkpoint(marker);
if (glob == 99) {
var infowindowoptions = {
content: 'This address is not within a LHIN boundary'
}
infowindow = new google.maps.InfoWindow(infowindowoptions);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ results[i].formatted_address +" "+ results[i].geometry.location + "Outside of Bounds";
}
else {
var infowindowoptions = {
content: 'This address is in LHIN '+labels[glob]
}
infowindow = new google.maps.InfoWindow(infowindowoptions);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ results[i].formatted_address +" "+ results[i].geometry.location +
" - LHIN "+(glob+1)+" "+labels[glob];
}
}
map.setCenter(results[0].geometry.location);
map.setZoom(17)
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function clearmarkers() {
if (gmarkers) {
for (i in gmarkers) {
gmarkers[i].setMap(null);
}
gmarkers.length = 0;
}
}
function checkpoint(marker) {
var LNum;
var point = marker.getPosition();
for (var i=0; i<polys.length; i++) {
if (polys[i].containsLatLng(point)) {
Lnum = i;
i = 999; // Jump out of loop
}
else {
Lnum = 99
}
}
return Lnum
};
// Polygon getBounds extension - google-maps-extensions
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polygon.prototype.getBounds) {
google.maps.Polygon.prototype.getBounds = function(latLng) {
var bounds = new google.maps.LatLngBounds();
var paths = this.getPaths();
var path;
for (var p = 0; p < paths.getLength(); p++) {
path = paths.getAt(p);
for (var i = 0; i < path.getLength(); i++) {
bounds.extend(path.getAt(i));
}
}
return bounds;
}
}
// Polygon containsLatLng - method to determine if a latLng is within a polygon
google.maps.Polygon.prototype.containsLatLng = function(latLng) {
// Exclude points outside of bounds as there is no way they are in the poly
var bounds = this.getBounds();
if(bounds != null && !bounds.contains(latLng)) {
return false;
}
// Raycast point in polygon method
var inPoly = false;
var numPaths = this.getPaths().getLength();
for(var p = 0; p < numPaths; p++) {
var path = this.getPaths().getAt(p);
var numPoints = path.getLength();
var j = numPoints-1;
for(var i=0; i < numPoints; i++) {
var vertex1 = path.getAt(i);
var vertex2 = path.getAt(j);
if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
inPoly = !inPoly;
}
}
j = i;
}
}
return inPoly;
}
Try getting rid of the form and instead set the onClick of the ‘Go!’ button to showAddress(). I tested this in IE7, Chrome, and Firefox and it worked.