I am using google maps and google places search, i am having two problems.
1-I want the infowidget to stay open when we move away from a marker. That means all of the info windows will remain open if that marker has been hovered over, right now it closes the previous marker window when another marker’s window opens.
2-I am getting few search results for places. For example when looking for Mcdonalds given a latlng of kansas city, it gives me only one result. The code is here.
function initialize()
{
var lat;
var longitude;
var zoom;
var radius_hidden=document.getElementById("hidden_radius").value;
var searchname=document.getElementById("hidden_searchname").value;
if(trim(document.getElementById("longitude").value)!="")
{
zoom=11;
lat=document.getElementById("latitude").value;
longitude=document.getElementById("longitude").value;
}
else
{
zoom=11;
longitude="-88";
lat="42";
}
latlng = new google.maps.LatLng(lat,longitude);
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//alert("Radius:"+radius_hidden);
var requestsearch = {
location: latlng,
name: searchname,
types: ['store'],
bound:latlngbounds,
rankBy: google.maps.places.RankBy.DISTANCE
};
// keyword: searchname,//name: searchname, to get like pages and name to get exact
service = new google.maps.places.PlacesService(map);
//service.textSearch(requestsearch, callback);
service.search(requestsearch, callback);
if(map != null) {
google.maps.event.addListener(map, 'drag', function(event) {
calculateCenter();
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
//google.maps.event.trigger(map, 'resize');
});
function calculateCenter() {
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0 ; i < markersArray.length ; i++) {
latlngbounds.extend(markersArray[i].getPosition());
}
//map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
center = map.getCenter();
}
function callAfterMarker(){
alert("Market Clicked");
}
function callback(results, status)
{
var listing='<table width="100%" border="0">';
var num=5;
markersArray = new Array();
if (status == google.maps.places.PlacesServiceStatus.OK)
{
for (var i = 0; i < results.length; i++)
{
var pincode='';
var address='';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': results[i].vicinity,
'partialmatch': true},function(resultsp, status)
{
if (status == 'OK' && resultsp.length > 0)
{
address=resultsp[0].formatted_address;
var len=resultsp[0].address_components.length-1;
var res=resultsp[0].address_components[len].short_name;
if(res!=undefined)
{
//address+="<br>Pincode:"+res.toString();
}
//listing+='<tr><td>Zip Code: '+res.toString()+'</td></tr>';
}
});
marker = new google.maps.Marker({
position: results[i].geometry.location,
title: results[i].name,
zIndex: 2,
icon: gicons["blue"]
});
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
var contentString = '<div id="infowindow' + i + '"><table width="100%"><tr><td>'+results[i].name+'</td></tr><tr><td style="word-wrap: break-word;">'+getaddress(results[i].vicinity)+'</td></tr><?php if(trim($finalURL)){ echo "<tr><td align=\"center\"><a target=\"_blank\" class=\"sty-action-buttn\" href=\"".$finalURL."\">".trim(getFieldFromDB('user_config','BubbleText'))."</a></td></tr>"; }else if(trim(getFieldFromDB('user_config','ActionLink'))){ echo "<tr><td align=\"center\"><a target=\"_blank\" class=\"sty-action-buttn\" href=\"".trim(getFieldFromDB('user_config','ActionLink'))."\">".trim(getFieldFromDB('user_config','BubbleText'))."</a></td></tr>"; }?></table></div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
return function () {
var contentString = '<div id="infowindow' + i + '"><table width="100%"><tr><td>'+results[i].name+'</td></tr><tr><td style="word-wrap: break-word;">'+getaddress(results[i].vicinity)+'</td></tr><?php if(trim($finalURL)){ echo "<tr><td align=\"center\"><a target=\"_blank\" class=\"sty-action-buttn\" href=\"".$finalURL."\">".trim(getFieldFromDB('user_config','BubbleText'))."</a></td></tr>"; }else if(trim(getFieldFromDB('user_config','ActionLink'))){ echo "<tr><td align=\"center\"><a target=\"_blank\" class=\"sty-action-buttn\" href=\"".trim(getFieldFromDB('user_config','ActionLink'))."\">".trim(getFieldFromDB('user_config','BubbleText'))."</a></td></tr>"; }?></table></div>';
var listItem = document.getElementById("item-" + i);
listItem.className = "grey";
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
return function () {
/*var contentString = '<div id="infowindow' + i + '"><table width="100%"><tr><td>'+results[i].name+'</td></tr><tr><td style="word-wrap: break-word;">'+getaddress(results[i].vicinity)+'</td></tr><?php if(trim($finalURL)){ echo "<tr><td align=\"center\"><a target=\"_blank\" class=\"sty-action-buttn\" href=\"".$finalURL."\">".trim(getFieldFromDB('user_config','BubbleText'))."</a></td></tr>"; }else if(trim(getFieldFromDB('user_config','ActionLink'))){ echo "<tr><td align=\"center\"><a target=\"_blank\" class=\"sty-action-buttn\" href=\"".trim(getFieldFromDB('user_config','ActionLink'))."\">".trim(getFieldFromDB('user_config','BubbleText'))."</a></td></tr>"; }?></table></div>';*/
var listItem = document.getElementById("item-" + i);
listItem.className = "change";
marker.setIcon(gicons["blue"]);
/* infowindow.setContent(contentString);
infowindow.open(map, marker);*/
}
})(marker, i));
markersArray.push(marker);
calculateCenter();
listing+='<tr><td>';
var address_link=results[i].vicinity.replace(" ","+");
if(i==0)
{
listing+='<table id="div5" width="100%" >';
}
else if(i%5==0)
{
num+=5;
listing+='<table id="div'+num+'" class="myclass" style="display:none;" width="100%">';
}
//'+results[i].name+'
listing +='<tr id="searchadd"><td ><input type="hidden" value="'+results[i].name+'" name="end'+i+'" id="end'+i+'"></td></tr><tr><td style="word-wrap: break-word;border-bottom:1px solid #cccccc;" onmouseout="markersArray['+i+'].setIcon(gicons.blue)" onmouseover="markersArray['+i+'].setIcon(gicons.yellow);openInfoWindow('+i+')" class="" id="item-'+i+'">'+getaddress(results[i].vicinity)+'<div id="spacer" style="width:120px;height:1px;float:left;"></div><a style="width:100px;height: 20px;" class="sty-hyperlink" target="_blank" href="https://maps.google.com/maps?daddr='+address_link+'"><b><?php echo getFieldFromDB('user_config','DirectionText'); ?></b></a><br></td></tr>';
if(i ==(results.length-1))
{
listing+='</table>';
listing+='<span id="largerwindowlink"><br><a target="_blank" class="sty-action-buttn" href="http://www.franchiseportals.com/contact.php?id=<?php echo $finalURL; ?>"><?php echo trim(getFieldFromDB('user_config','ActionButtonText')); ?></a></span>';
}
else if(i>0 &&(i+1)%5==0)
{
listing+='<tr><td align="right"><a class="sty-hyperlink" style="width:100px;height: 20px;" href="javascript:void(0);" onclick="javascript:show_hide_table('+num+');" ><b><?php echo getFieldFromDB('user_config','MoreResultText'); ?></b></a></td></tr></table>';
}
listing+='</td></tr>';
}
showOverlays(5);
listing +='</table>';
if(results.length<=0)
{
listing='<br><br><span style="color:green;">Sorry! No stores found.<br>Please try another franchise name</span><br><br>';
}
}
else
{
listing='<br><br><span style="color:green;">Sorry! No stores found.<br>Please try another franchise name</span><br><br>';
}
document.getElementById("listingAddress").innerHTML=listing;
}
function showOverlays(no)
{
if (markersArray)
{
for (i in markersArray)
{
if(i<no && i>=no-5)
markersArray[i].setMap(map);
}
}
}
function clearOverlays()
{
if (markersArray)
{
for (i in markersArray)
{
markersArray[i].setMap(null);
}
}
}
function openInfoWindow(loopID)
{
google.maps.event.trigger(markersArray[(parseInt(loopID))], "click");
}
function show_hide_table(tablid)
{
var showid=tablid+5;
clearOverlays();
showOverlays(showid);
if(document.getElementById("div"+showid))
{
document.getElementById("div"+showid).style.display="block";
}
if(document.getElementById("div"+tablid))
{
document.getElementById("div"+tablid).style.display="none";
}
}
function checkPin()
{
if(document.getElementById("pincode").value=="" || trim(document.getElementById("pincode").value)=="" )
{
alert("Please fill the Zip Code");
document.getElementById("pincode").focus();
return false;
}
}
function checkMobPin()
{
if(document.getElementById("zipcode").value=="" || trim(document.getElementById("zipcode").value)=="Choose other zip code" )
{
alert("Please fill the Zip Code");
document.getElementById("zipcode").focus();
return false;
}
else
{
document.getElementById("pincode").value=document.getElementById("zipcode").value;
}
}
function show_table()
{
if (document.getElementById("viewOption").value == "list")
{
document.getElementById("maptd").className = "list-map-td-change";
document.getElementById("addresstd").className="list-address-td-change";
}
else
{
document.getElementById("maptd").className="list-map-td";
document.getElementById("addresstd").className="list-address-td";
}
}
function getaddress(address)
{
var part=address.split(',');
var result='';
for(var i=0; i<part.length; i++)
{
result+=part[i]+'<br>' ;
}
return result;
}
//alert($(window).width());
/*$(window).resize(function() {
if($(window).width()<=600)
map.setZoom(10);
if($(window).width()>600)
map.setZoom(11);
google.maps.event.trigger(map, 'resize');
});*/
</script>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
}
$( "#address" ).autocomplete({ //here you have to write the name of search box, no need to call function from textbox
source: "jquery4dd/search_content.php",
minLength: 1,
selectFirst:true,
select: function(event, ui) {
$('#business_url').val(ui.item.url);
$('#address').val(ui.item.value);
}
});
});
function checkAddress()
{
if(document.getElementById("address").value=="" || trim(document.getElementById("address").value)=="Type Name Here" )
{
alert("Please fill the Business Name");
document.getElementById("address").focus();
return false;
}
}
EDIT:
You can check result for searching McDonalds here My site . You can also check what paramerters are being passed to query in the url.
Actually you have only 1 infoWindow-object for all markers, you need 1 for every single marker.
replace the mouseover-and-click-part of the
callback-function with the following:It may be disputed :D, but McDonalds is rather a restaurant than a store, you should change the type to “restaurant”