1

Google マップと Google プレイス検索を使用していますが、2 つの問題があります。

1-マーカーから離れたときに情報ウィジェットを開いたままにしておきたい。つまり、そのマーカーがホバーされている場合、すべての情報ウィンドウが開いたままになります。現在、別のマーカーのウィンドウが開くと、前のマーカー ウィンドウが閉じます。

2-場所の検索結果がほとんどありません。たとえば、カンザスシティの緯度を指定してマクドナルドを検索すると、結果は 1 つしか返されません。コードはこちらです。

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;
  }
}

編集:ここでマクドナルドを検索した結果を確認できますMy site。また、URL でクエリに渡されるパラメーターを確認することもできます。

4

1 に答える 1

2

  1. 実際には、すべてのマーカーに対して infoWindow オブジェクトが 1 つしかなく、マーカーごとに 1 つ必要です。-function の mouseover-and-click-part をcallback次のように置き換えます。

    window.zIndex= window.zIndex||100;
google.maps.event.addListener(marker, 'mouseover', (function (marker, i,infowindow) {
    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><tr><td align="center"><a target="_blank" class="sty-action-buttn" href=" http://www.franchiseopportunities.com/franchisefbo.asp?fboid=">Get More Information</a></td></tr></table></div>';
        infowindow.setContent(contentString);
             //brings the infoWindow into front
        infowindow.setZIndex(window.zIndex++);
        infowindow.open(map, marker);
    }
})(marker, i, new google.maps.InfoWindow()));

  2. 論争になるかもしれませんが、マクドナルドは店舗というよりレストランです。タイプを「レストラン」に変更する必要があります。

于 2012-09-08T14:40:29.997 に答える