mercredi 15 juin 2016

google map marker show lable on hover in mobile

i am showing google map with some store marker that works fine in pc , but have some issue in mobile.

when i hover on store in my desktop it show location label.

check sample link at : https://jsfiddle.net/mishragaurav31/7e8vkmoa/3/

but when i open it in mobile hover does not do anything how to sort this out how can i show label in mobile

Html code :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
<div id="map" style="height:600px"></div>

Js code :

<script>
    $(window).ready(function () {
        var g = {"StoreLocatorResp":{"result":0,"faultMessage":"","locationList":[{"nodename":"Caltex Cessnyl Cstore","contactname":"Casper","contactno":"27147173467","address":",11 Nelson Mandela Drive,MODIMOLLE,LIMPOPO","longitude":28.4053027,"latitude":-24.6995526,"distance":531.53},{"nodename":"Caltex Freshstop Eager Motors","contactname":"Gerhardus","contactno":"27154914732","address":",90 Thabo Mbeki Drive,MOKOPANE,LIMPOPO","longitude":29.012146,"latitude":-24.186636,"distance":83974.75},{"nodename":"Caltex Freshstop Wonderpark","contactname":"Jacobus","contactno":"27125491562","address":",Cnr Brits and Henrich,PRETORIA NORTH,GAUTENG","longitude":28.1086347,"latitude":-25.6745512,"distance":111936.53},{"nodename":"Caltex Freshstop Groblersdal","contactname":"Karin","contactno":"27132624725","address":",18 Hereford Street,Groblersdal,Mpumalanga","longitude":29.3971019,"latitude":-25.1645345,"distance":112111.63},{"nodename":"Caltex Freshstop Conlee Motors","contactname":"Jacob","contactno":"27123330128","address":",1052 Nico Smit,VILLIERIA,GAUTENG","longitude":28.2358784,"latitude":-25.7184941,"distance":114028.34},{"nodename":"Davinico Pty Ltd","contactname":"Thabo","contactno":"27837751863","address":",113 Camberland Avenue,BRYNTIRION,GAUTENG","longitude":28.2153572,"latitude":-25.7273471,"distance":115327.56},{"nodename":"Caltex Freshstop Waterkloof Glen Motors","contactname":"Charle","contactno":"27129935739","address":",374 Roslyn Avenue,WATERKLOOF,GAUTENG","longitude":28.274938,"latitude":-25.799138,"distance":122405.42},{"nodename":"Caltex Freshstop Excelsior Motors","contactname":"Martin","contactno":"27126646592","address":",108 Trichardt Street Centurion,LYTTELTON,GAUTENG","longitude":28.198886,"latitude":-25.819358,"distance":125683.2},{"nodename":"Caltex Xanadu Service Station","contactname":"Mitchell","contactno":"27122591854","address":"Xanadu Eco Park,R511,HARTBEESPOORT,GAUTENG","longitude":27.9477394,"latitude":-25.7706558,"distance":127192.76},{"nodename":"Q-Mart Pty Ltd","address":"Centurion Gate Business Park,124 Akkerboom Street,CENTURION,CENTURION,0157","longitude":28.1883773,"latitude":-25.8665364,"distance":131027.58}]}};
        var decode = jQuery.makeArray(g);
        var locations = jQuery.makeArray(decode[0].StoreLocatorResp.locationList);
        var mylocation = new google.maps.LatLng(-24.704055, 28.407081);
        google.maps.visualRefresh = true;
        var mapProp = {
            center: mylocation,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            navigationControl: true,
            mapTypeControl: false,
            scaleControl: false,
            draggable: true,
            clickable: false
        };
        var map = new google.maps.Map(document.getElementById("map"), mapProp);
        var marker = new google.maps.Marker({
            position: mylocation,
            map: map,
            title: 'My Location'
        });
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

        for (var i = 0; i < locations.length; i++) {
            //alert(locations[i].nodename)
            var mylocation = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
            var marker = new google.maps.Marker({
                position: mylocation,
                map: map,
                title: locations[i].nodename + "n" + locations[i].address



            });
            marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
        }

    });


</script>

Aucun commentaire:

Enregistrer un commentaire