I'm displaying map in a website with markers. I get the location from mysql database using a servlet and get it in js.
function initMap() {
getLocationFromServlet(xhr); //get
setTimeout(function() {
createMap(); //create map after getting coord from getLocationFromServlet(xhr), but latArray is empty
console.log(latArray); //empty here though defined in getLocationFromServlet
}, 1300);
}
function createMap() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv);
map.setCenter(new google.maps.LatLng(latArray[0], lngArray[0]));
map.setZoom(17);
createMarker();
setTimeout(function() {
console.log(latArray);
}, 1600)
}
function createMarker() {
latArray.forEach(function(lat, i) {
var infoWindow = new google.maps.InfoWindow({
content: '<div id="content>' + '<p style="color:#000000">DeviceID:<p>' + '<p>' + deviceId[i] + '</p>' + '</div>'
});
var marker = new google.maps.Marker({
map: map,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//position: new google.maps.LatLng(latArray[i], lngArray[i]),
icon: "phone6.png"
});
markerArray.push(marker);
markerArray[i].setPosition(new google.maps.LatLng(latArray[i], lngArray[i]));
markerArray[i].addListener("click", function() {
infoWindow.open(map, marker);
});
});
console.log(latArray);
}
function getLocationFromServlet(xhr) {
xhr = new XMLHttpRequest();
xhr.open('POST', 'GetLocationFromDB', true);
xhr.send();
xhr.onreadystatechange = function() {
console.log(xhr.readyState == 4); // false twice in console.log, but I call the function only once
if (xhr.readyState == 4) {
data = JSON.parse(xhr.responseText);
//console.log(data);
if (latArrayCount != 1) {
latArray.length = 0;
lngArray.length = 0;
deviceId.length = 0;
} else {
latArrayCount++;
}
for (i = 0; i < data.length; i++) {
if (!((i + 1) % 3 == 0)) {
//console.log(data);
latArray.push(data[i]);
lngArray.push(data[i + 1]);
deviceId.push(data[i + 2]);
i = i + 2;
console.log("lat" + latArray);
}
}
}
}
console.log(latArray); //displayed empty twice before displaying latArray values
}
This code works in ms sql. In mysql i see values in console only after few falses above the console in if (xhr.readyState == 4)
Related
i have the below code
but when add new marker i want removing old marker
please help me about this
I searched for a lot of resources, but unfortunately I didn't get them
var map;
var center = new google.maps.LatLng(45.567846, 25.396878);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function init() {
var mapOptions = {
zoom: 4,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var timerId = setInterval( function(){
makeRequest('GPS/get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
}, 2000);
}
function displayLocation(location) {
var content = '<div class="infoWindow"><strong>'
+ location.branch +" "+ location.serial
+ '</strong>'
+ '<br/>' +"User: "+ location.user
// + '<br/>' +"Serial: "+ location.serial
+ '<br/>' +"Date: "+ location.date
+ '<br/>' +"Time: "+ location.time
+ '<br/>' +"Lat: "+ location.lat
+ '<br/>' +"Lng: "+ location.lng +'</div>'
+ '<br/>' +"Speed: "+ location.speed +'</div>';
// + '<br/>' +"Credit: "+ location.credit +'</div>'
// + '<br/>' +"Charge: "+ location.charge +'</div>';
if (parseInt(location.lat) == 0) {
geocoder.geocode( { 'address': location.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
/* Save geocoding result to the Database
var url = 'set_coords.php?id=' + location.id
+ '&lat=' + results[0].geometry.location.lat()
+ '&lon=' + results[0].geometry.location.lng();
makeRequest(url, function(data) {
if (data.responseText == 'OK') {
// Success
}
});*/
}
});
} else {
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
var marker = new google.maps.Marker({
map: map,
position: position,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
}
var timerId = setInterval( function(){
init();
}, 60000);
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
//]]>
i have the below code
but when add new marker i want removing old marker
please help me about this
I searched for a lot of resources, but unfortunately I didn't get them
The solution is simple. Declare your marker variable as null outside of the function displayLocation():
var marker = null
Then add this condition:
//Your code//
/////////////
if (marker != null){
marker.setMap(null)
}
marker = new google.maps.Marker({
map: map,
position: position,
title: location.name
});
/////Your rest of the code//////
Complete code is here:
var map;
var marker = null;
var center = new google.maps.LatLng(45.567846, 25.396878);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function init() {
var mapOptions = {
zoom: 4,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var timerId = setInterval( function(){
makeRequest('GPS/get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
}, 2000);
}
function displayLocation(location) {
var content = '<div class="infoWindow"><strong>'
+ location.branch +" "+ location.serial
+ '</strong>'
+ '<br/>' +"User: "+ location.user
// + '<br/>' +"Serial: "+ location.serial
+ '<br/>' +"Date: "+ location.date
+ '<br/>' +"Time: "+ location.time
+ '<br/>' +"Lat: "+ location.lat
+ '<br/>' +"Lng: "+ location.lng +'</div>'
+ '<br/>' +"Speed: "+ location.speed +'</div>';
// + '<br/>' +"Credit: "+ location.credit +'</div>'
// + '<br/>' +"Charge: "+ location.charge +'</div>';
if (parseInt(location.lat) == 0) {
geocoder.geocode( { 'address': location.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (marker != null){
marker.setMap(null)
}
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
/* Save geocoding result to the Database
var url = 'set_coords.php?id=' + location.id
+ '&lat=' + results[0].geometry.location.lat()
+ '&lon=' + results[0].geometry.location.lng();
makeRequest(url, function(data) {
if (data.responseText == 'OK') {
// Success
}
});*/
}
});
} else {
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
if (marker != null){
marker.setMap(null)
}
marker = new google.maps.Marker({
map: map,
position: position,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
}
var timerId = setInterval( function(){
init();
}, 60000);
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
//]]>
Hello I have a file with the next code, a file named google-maps.php
<script>
var customIcons = {
restaurant: {
icon: 'img/homepage/pin.png'
},
cafenele: {
icon: 'img/homepage/pni2.png'
}
};
var markerGroups = {
"restaurant": [],
"cafenele": []
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.059516, 21.947613),
zoom: 13,
scrollwheel: false,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
var bounds = new google.maps.LatLngBounds();
downloadUrl("googlemaps/phpsqlajax_genxml2.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id_marker = markers[i].getAttribute("id_marker");
var name = markers[i].getAttribute("name");
var category = markers[i].getAttribute("category");
var address = markers[i].getAttribute("address");
var img = markers[i].getAttribute("img");
var phone = markers[i].getAttribute("phone");
var schedule = markers[i].getAttribute("schedule");
var link = markers[i].getAttribute("link");
document.getElementById('categorii').src = img;
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
id_marker: id_marker,
image: img,
type: type
});
if (!markerGroups[type])
markerGroups[type] = [];
markerGroups[type].push(marker);
marker.setVisible(false);
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
toggleGroup("spa");
});
}
function toggleGroup(type)
{
for (var key in markerGroups)
{
for (var i = 0; i < markerGroups[key].length; i++)
{
var marker = markerGroups[key][i];
if (type == key) {
marker.setVisible(true);
} else
{
marker.setVisible(false);
}
}
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
document.getElementById('categorii').src = marker.image;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
</script>
If I put my code in JS the code works but I need to put in PHP file in future I want to echo some data from database. The error I have in console is Uncaught SyntaxError: Unexpected token< . Why is working if the file type is JS and why is not working on PHP file type? What cand I do?
You need to close php tag before script and open in after script like this
<?php
//some php code
?>
<script>
...
..
</script>
<?php
//php code
?>
I would like to display a map that limits nearby results to a category that I designate. I have code that allows for the user to complete their own search, but would like to modify so that the search is disabled and the category is predefined. Source: http://www.gurchet-rai.net/apps/places/
$(document).ready(function(){
var loc;
var map;
var service;
var infoWindow;
var overlays = [];
var resultList = [];
var isMobile = $(window).width < 767;
try {
if (typeof navigator.geolocation !== 'undefined') {
navigator.geolocation.getCurrentPosition (
function(position) {
var coords = position.coords;
loc = new google.maps.LatLng(coords.latitude, coords.longitude);
map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
center: loc,
zoom: 13
});
service = new google.maps.places.PlacesService(map);
infoWindow = new google.maps.InfoWindow();
},
function(error) {
if (error.code == 1) {
$('#location-details').append('Please enable location tracking in your web browser');
} else if (error.code == 2) {
$('#location-details').append('Unable to determine location - please ensure location tracking is enabled in your browser');
} else {
$('#location-details').append('Unable to determine location');
}
},
{enableHighAccuracy: true}
);
} else {
$('#location-details').append('Your browser does not support location tracking');
}
} catch (e) {
alert('An error has occured');
}
function plotResultList(){
var iterator = 0;
for(var i = 0; i < resultList.length; i++){
setTimeout(function(){
var lat = resultList[iterator].geometry.location.Za;
var lng = resultList[iterator].geometry.location.Ya;
var name = resultList[iterator].name;
var addr = resultList[iterator].formatted_address;
var reference = resultList[iterator].reference;
var marker = new google.maps.Marker({
position: resultList[iterator].geometry.location,
map: map,
title: name,
animation: isMobile? 'undefined' : google.maps.Animation.DROP
});
overlays.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
var request = {
reference: reference
};
service.getDetails(request, function(place, status){
var content = "<h6>" + name + "</h6>";
if(status == google.maps.places.PlacesServiceStatus.OK){
if(typeof place.rating !== 'undefined'){
var badgeType = '';
if (place.rating < 2){
badgeType = 'badge-important';
} else if (place.rating >= 2 && place.rating <= 3){
badgeType = 'badge-warning';
} else {
badgeType = 'badge-success';
}
content += "<p><small>Rating: <span class='badge " + badgeType + "'>" + place.rating + "</span></small></p>";
}
if(typeof place.formatted_address !== 'undefined'){
content += "<br><small>" + place.formatted_address + "</small>";
}
if(typeof place.formatted_phone_number !== 'undefined'){
content += "<br><small><a href='tel:" + place.formatted_phone_number + "'>" + place.formatted_phone_number + "</a></small>";
}
if(typeof place.website !== 'undefined'){
content += "<br><small><a href='" + place.website + "'>website</a></small>";
}
}
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
});
iterator++;
}, isMobile? 0: (i * 75));
}
}
$('#search').submit(function(e){
e.preventDefault();
var query = $('#query').val();
var request = {
location: map.getCenter(),
radius: '5000',
query: query
};
service.textSearch(request, function(results, status, pagination){
for(var i = 0; i < overlays.length; i++){
overlays[i].setMap(null);
}
resultList.length = 0;
overlays.length = 0;
if (status == google.maps.places.PlacesServiceStatus.OK) {
resultList = resultList.concat(results);
plotResultList();
}
});
});
});
Take a look on Maps Javascript API, specifically in the types parameter. Here are described the allowed types.
Let's say you want to show airports based on user's search, your request will be:
var request = {
location: map.getCenter(),
radius: '5000',
query: query,
types: ['airport']
};
I am working on a map based search project,Visit http://indiahomeplus.com/mapview.php ,
here the center of the map is not stable , i have given its center to kolkata but it changes automatically to unknown place.
And there is also a s
Can anyone pl's check this issue.
here is the js.
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;
var iCircle;
function init() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(22.607672, 88.399901),
zoom: 12,
mapTypeId: 'roadmap',
minZoom: 8,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function () {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none") {
google.maps.event.trigger(markers[markerNum], 'click');
}
}; searchLocationsNear(new google.maps.LatLng(22.607672, 88.399901));
//alert("in init");
var distanceWidget = new DistanceWidget(map);
// getmarkers();
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function (data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("property");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var pid = markerNodes[i].getAttribute("pid");
//var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
//alert(pid);
createOption(name, distance, i);
createMarker(latlng, name,pid);
bounds.extend(latlng);
// sidebar(pid, latlng);
}
map.fitBounds(bounds);
// locationSelect.style.visibility = "visible";
locationSelect.onchange = function () {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name,pid) {
var html = "<b>" + name +","+pid+ "</b>";
var marker = new google.maps.Marker({
map: map,
position: latlng,
visible:false //, icon:'images/marker_p1.png'
});
google.maps.event.addListener(marker, 'click', function () {
show_right_div(pid);
//showxx();
});
google.maps.event.addListener(marker, 'mouseover', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
// alert(marker);
});
google.maps.event.addListener(marker, 'mouseout', function () {
infoWindow.close();
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() { }
google.maps.event.addDomListener(window, 'load', init);
//]]>
function hide_right_div() {
right_div.style.visibility = "hidden";
}
function show_right_div(str) {
right_div.style.visibility = "visible";
boxclose.style.visibility="visible"
if (str == "")
{
document.getElementById("right_div").innerHTML = "";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("right_div").innerHTML = xmlhttp.responseText;
resp = xmlhttp.responseText;
parseScript(resp);
}
}
xmlhttp.open("GET", "getproperty_view.php?q=" + str, true);
xmlhttp.send();
//parseScript(resp);
}
function parseScript(strcode) {
var scripts = new Array(); // Array which will store the script's code
// Strip out tags
while(strcode.indexOf("<script") > -1 || strcode.indexOf("</script") > -1) {
var s = strcode.indexOf("<script");
var s_e = strcode.indexOf(">", s);
var e = strcode.indexOf("</script", s);
var e_e = strcode.indexOf(">", e);
// Add to scripts array
scripts.push(strcode.substring(s_e+1, e));
// Strip from strcode
strcode = strcode.substring(0, s) + strcode.substring(e_e+1);
}
// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
try {
eval(scripts[i]);
}
catch(ex) {
// do what you want here when a script fails
}
}
}
The workflow of your script is:
call init where you create the map and call...
searchLocationsNear...where you send a request to
http://indiahomeplus.com/phpsqlsearch_genxml.php?lat=22.607672&lng=88.399901&radius=25
this response of this script is Not connected : in the....
callback for the above request you create a LatLngBounds-object and extend it with locations based on the response(which will not happen, because the response doesn't contain markers) . Later you call ...
map.fitBounds(bounds); the inital bounds of a google.maps.LatLngBounds seems to be
((1,180),(-1,-180))
...the viewport of the map will be set to fit these bounds, that's the result you see.
Possible solution: immediately leave the callback when there are no markers :
if(!markerNodes.length)return;
I can't seem to get the markers to show up for Internet Explorer, despite it working fine on other browsers.
When I run it on IE, it makes me debug it and gives the error.
"Line: 173
Error: 'console' is undefined"
<script type='text/javascript'>
var markerList = new Array();
var propertyList = new Array();
var itemDisplayList = new Array();
var geocoder;
var map;
var latLng;
var browserSupportFlag = new Boolean();
var yaml;
var currentWindow = null;
var addr = "Kansas, KA"
function initialize() {
newMap();
showAllProperties();
<% #yaml = YAML.load(File.read("config/property.yml")) %>
<%
addr = []
name = []
link = []
contact = []
#yaml.each do |property|
prop = Property.new(property)
addr << prop.format_address
contact << prop.format_contact_info
name << prop.property
link << prop.link
end
%>
var addresses = <%= addr.to_json %>;
var names = <%= name.to_json %>;
var contacts = <%= contact.to_json %>;
var links = <%= link.to_json %>;
var i = 0;
function slow_addMarker(){
if(i < addresses.length){
var propertyObj = {address: addresses[i], name: names[i], link: links[i], contact: contacts[i]};
propertyList.push(propertyObj);
addMarker(propertyObj, i);
i++;
if (i < addresses.length){
timeout = setTimeout(slow_addMarker,500);
}
}
}
slow_addMarker();
/*
for(var i = 0; i < addresses.length; i++)
{
var propertyObj = {address: addresses[i], name: names[i], link: links[i], contact: contacts[i]};
propertyList.push(propertyObj);
addMarker(propertyObj, i); //We need to specify the id or else items can be populated in the wrong order due to difference in API call timing
}
*/
itemDisplayList = $('.locations li');
}
function newMap()
{
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
}; //end of my options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode({'address': addr}, function(results, status)
{
if(status == google.maps.GeocoderStatus.OK)
{
latLng = results[0].geometry.location;
map.setCenter(latLng);
// var marker = new google.maps.Marker(
// {
// // map: map,
// position: latLng
// // icon: "/images/common/gmap_blue_icon.png",
// // shadow: "/images/common/shadow50.png"
// });
// google.maps.event.addListener(marker, 'click', function()
// {
// if (currentWindow != null)
// {
// currentWindow.close();
// }
// infoWindowHere.open(map,marker);
// currentWindow = infoWindowHere;
// });
}
else
{
alert("Geocode was not successful for the following reason: " + status);
latLng = new google.maps.LatLng(0.0, 0.0);
}
});
}
function handleNoGeolocation(errorFlag)
{
if(errorFlag == true)
{
alert("Geolocation service failed.");
geocoder.geocode( { 'address': "<%= Property.new(YAML.load(File.read("config/property.yml"))[0]).format_address%>"}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
else
{
alert("Your browser doesn't support geolocation.");
geocoder.geocode( { 'address': "<%= Property.new(YAML.load(File.read("config/property.yml"))[0]).format_address%>"}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function addInfoWindow(propertyObject)
{
var contentStr =''+
'<div id="siteNotice">'+
'<h2>'+ propertyObject.name +'</h2>'+
'<p>'+ propertyObject.address +'</p>'+
'<p>'+ propertyObject.contact +'</p>'+
'<a class="goto" href="'+ propertyObject.link + '">View Details</a>'+
'</div>';
var infoWindow = new google.maps.InfoWindow(
{
map: map,
content: contentStr
});
return infoWindow
}
function addMarker(propertyObject, id)
{
var wait_time = 200 * id;
setTimeout(function(){
geocoder.geocode({'address': propertyObject.address}, function(results, status)
{
if(status == google.maps.GeocoderStatus.OK)
{
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.location
});
markerList[id] = marker;
// google.maps.event.addListener(marker, 'click', function()
// {
// if (currentWindow != null)
// {
// currentWindow.close();
// }
// var infoWindow = addInfoWindow(propertyObject);
// infoWindow.open(map,marker);
// currentWindow = infoWindow;
//
// });
}
else
{
//alert("Geocode was not successful for the following reason: " + status);
if (status = google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function(){addMarker(propertyObject, id)}, 600); //try to reload it a bit later
}
}
});
}, wait_time);
}
function hideAllMarkers()
{
for( var i = 0; i < markerList.length; i++)
{
markerList[i].setVisible(false);
}
}
function openWindow(map, marker)
{
// // if currentWindow != null
// // google.maps.event.trigger(currentWindow, 'closeclick');
// var infoWindow = addInfoWindow(propertyObject);
// infoWindow.open(map,marker);
// currentWindow = infoWindow;
}
function showAllProperties()
{
for(var i = 0; i < propertyList.length; i++)
{
markerList[i].setVisible(true);
$(itemDisplayList[i]).show('slow');
}
}
function showOneCity(city)
{
for(var i = 0; i < propertyList.length; i++)
{
if(propertyList[i].address.search(city) != -1)
{
markerList[i].setVisible(true);
$(itemDisplayList[i]).show('slow');
}
else
{
markerList[i].setVisible(false);
$(itemDisplayList[i]).hide('slow');
}
}
}
function showOneProperty(property)
{
for(var i = 0; i < propertyList.length; i++)
{
// alert(propertyList[i].name + " " + property)
if(propertyList[i].name == property)
markerList[i].setVisible(true);
else
markerList[i].setVisible(false);
}
}
</script>
There is no console in IE. Remove or comment out line 173 (or write a console replacement function). Once you do that it seems to work fine.