Marker Icon have Issues
arulananth opened this issue · comments
HI Ebidel,
When i use icon property mark icons are invisible.Sometime is show & some request not.
http://www.qcityguide.com/qcg/restaurant/?search=1
Check the above url try click search button continuously 5 times (All the click send same request ).
But map markers are hidden.
Right side boxes are 7 .But Marker icons invisible.
How i update markers use ajax request?
Please post some minimal code.
On Sun, Nov 8, 2015, 6:28 AM Arul notifications@github.com wrote:
HI Ebidel,
When i use icon property mark icons are invisible.Sometime is show & some
request not.http://www.qcityguide.com/qcg/restaurant/?search=1
Check the above url try click search button continuously 5 times (All the
click send same request ).But map markers are hidden.
Right side boxes are 7 .But Marker icons invisible.
How i update markers use ajax request?
—
Reply to this email directly or view it on GitHub
#228.
My code Here.
If remove the first-block of google map marker everything is fine.
<style>
google-map
{
height:100%;display:block;border:1px solid #000;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175)
}
</style>
<script src="http://www.qcityguide.com/qcg/assets/map/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://www.qcityguide.com/qcg/assets/map/google-map.html" target="_blank" rel="nofollow">
<link rel="import" href="http://www.qcityguide.com/qcg/assets/map/google-map-marker.html">
<link rel="import" href="http://www.qcityguide.com/qcg/assets/map/google-map-poly.html">
<link rel="import" href="http://www.qcityguide.com/qcg/assets/map/google-map-directions.html">
<google-map singleInfoWindow latitude="25.16161" longitude="51.47044" zoom="9" min-zoom="4"
language="en" fitToMarkers>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/map.png" latitude="25.352143599999998" longitude="51.4939853"
title="Your Location" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">You!</h6>
</div>
</div>
</google-map-marker>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/marker-icon.png" latitude="25.301820690255198" longitude="51.47541046142578"
title="Argo Tea" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">ARGO TEA</h6>
<span class="alertopen"> OPEN </span>
</div>
<div class="secondline">
<img src="http://www.qcityguide.com/qcg/rest_images/7/sub/agro.jpg" width="31" height="25">
<span class="cuisinename">Café</span>
<span class="deals">55% OFF</span>
</div>
<div class="thirdline">
<i class="fa fa-star colorchange"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star "></i>
<a href="http://www.qcityguide.com/qcg/restaurant/view_rest/argo-tea_7" class="btn btn-xs btn-primary order">Order</a>
<a href="http://maps.google.com/maps?saddr=25.352143599999998,51.4939853&daddr=25.301820690255198,51.47541046142578" target="_blank" class="btn btn-xs btn-primary getthere">Get there</a>
</div>
</div>
</google-map-marker>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/marker-icon.png" latitude="25.265344679809104" longitude="51.61325454711914"
title="Argo Tea" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">ARGO TEA</h6>
<span class="alertclosed"> CLOSED </span>
</div>
<div class="secondline">
<img src="http://www.qcityguide.com/qcg/rest_images/13/sub/g9iXHGCzjEXZdpyxESDmDA-ArgoTeaLogo.jpg" width="31" height="25">
<span class="cuisinename">Café</span>
<span class="deals">55% OFF</span>
</div>
<div class="thirdline">
<i class="fa fa-star colorchange"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star "></i>
<a href="http://www.qcityguide.com/qcg/restaurant/view_rest/argo-tea_13" class="btn btn-xs btn-primary order">Order</a>
<a href="http://maps.google.com/maps?saddr=25.352143599999998,51.4939853&daddr=25.265344679809104,51.61325454711914" target="_blank" class="btn btn-xs btn-primary getthere">Get there</a>
</div>
</div>
</google-map-marker>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/marker-icon.png" latitude="25.259372628825165" longitude="51.443122029304504"
title="Paul Restaurant" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">PAUL RESTAURANT</h6>
<span class="alertclosed"> CLOSED </span>
</div>
<div class="secondline">
<img src="http://www.qcityguide.com/qcg/rest_images/11/sub/paul_logo1.jpg" width="31" height="25">
<span class="cuisinename">French ,Italian </span>
<span class="deals">55% OFF</span>
</div>
<div class="thirdline">
<i class="fa fa-star colorchange"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star "></i>
<a href="http://www.qcityguide.com/qcg/restaurant/view_rest/paul-restaurant_11" class="btn btn-xs btn-primary order">Order</a>
<a href="http://maps.google.com/maps?saddr=25.352143599999998,51.4939853&daddr=25.259372628825165,51.443122029304504" target="_blank" class="btn btn-xs btn-primary getthere">Get there</a>
</div>
</div>
</google-map-marker>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/marker-icon.png" latitude="25.260939653568776" longitude="51.44296646118164"
title="Columbus Cafe" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">COLUMBUS CAFE</h6>
<span class="alertclosed"> CLOSED </span>
</div>
<div class="secondline">
<img src="http://www.qcityguide.com/qcg/rest_images/9/sub/Columbus_Cafe_Logo.jpg" width="31" height="25">
<span class="cuisinename"></span>
<span class="deals">55% OFF</span>
</div>
<div class="thirdline">
<i class="fa fa-star colorchange"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star "></i>
<a href="http://www.qcityguide.com/qcg/restaurant/view_rest/columbus-cafe_9" class="btn btn-xs btn-primary order">Order</a>
<a href="http://maps.google.com/maps?saddr=25.352143599999998,51.4939853&daddr=25.260939653568776,51.44296646118164" target="_blank" class="btn btn-xs btn-primary getthere">Get there</a>
</div>
</div>
</google-map-marker>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/marker-icon.png" latitude="25.265790995136452" longitude="51.546993255615234"
title="Paul" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">PAUL</h6>
<span class="alertclosed"> CLOSED </span>
</div>
<div class="secondline">
<img src="http://www.qcityguide.com/qcg/rest_images/4/sub/Columbus_Cafe_Logo.jpg" width="31" height="25">
<span class="cuisinename">French ,Italian </span>
<span class="deals">55% OFF</span>
</div>
<div class="thirdline">
<i class="fa fa-star colorchange"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star "></i>
<a href="http://www.qcityguide.com/qcg/restaurant/view_rest/paul_4" class="btn btn-xs btn-primary order">Order</a>
<a href="http://maps.google.com/maps?saddr=25.352143599999998,51.4939853&daddr=25.265790995136452,51.546993255615234" target="_blank" class="btn btn-xs btn-primary getthere">Get there</a>
</div>
</div>
</google-map-marker>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/marker-icon.png" latitude="25.376988708855716" longitude="51.525219082832336"
title="Paul Restaurant" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">PAUL RESTAURANT</h6>
<span class="alertclosed"> CLOSED </span>
</div>
<div class="secondline">
<img src="http://www.qcityguide.com/qcg/rest_images/12/sub/paul_logo.jpg" width="31" height="25">
<span class="cuisinename">French ,Italian </span>
<span class="deals">55% OFF</span>
</div>
<div class="thirdline">
<i class="fa fa-star colorchange"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star "></i>
<a href="http://www.qcityguide.com/qcg/restaurant/view_rest/paul-restaurant_12" class="btn btn-xs btn-primary order">Order</a>
<a href="http://maps.google.com/maps?saddr=25.352143599999998,51.4939853&daddr=25.376988708855716,51.525219082832336" target="_blank" class="btn btn-xs btn-primary getthere">Get there</a>
</div>
</div>
</google-map-marker>
<google-map-marker animation="DROP" icon="http://www.qcityguide.com/qcg/assets/images/marker-icon.png" latitude="25.334073654362207" longitude="51.46746709942818"
title="Columbus Cafe" >
<div class="bubble" style="width:100%">
<div class="firstline">
<h6 class="name">COLUMBUS CAFE</h6>
<span class="alertclosed"> CLOSED </span>
</div>
<div class="secondline">
<img src="http://www.qcityguide.com/qcg/rest_images/10/sub/Columbus_Cafe_Logo1.jpg" width="31" height="25">
<span class="cuisinename">Café</span>
<span class="deals">55% OFF</span>
</div>
<div class="thirdline">
<i class="fa fa-star colorchange"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star "></i>
<a href="http://www.qcityguide.com/qcg/restaurant/view_rest/columbus-cafe_10" class="btn btn-xs btn-primary order">Order</a>
<a href="http://maps.google.com/maps?saddr=25.352143599999998,51.4939853&daddr=25.334073654362207,51.46746709942818" target="_blank" class="btn btn-xs btn-primary getthere">Get there</a>
</div>
</div>
</google-map-marker>
</google-map>
<script>var gmap = document.querySelector('google-map');</script>
I'm sorry, but that's not minimal at all. If you're posting a bug, a minimal test case that reproduces the issue is needed. Please reopen when you can provide that.
Just a note, your attributes need to be "-" case. singleInfoWindow -> single-info-window.