google map marker show lable on hover in mobile

Question

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>

Answer 1

You can't have hover event on mobile. I belive you understand that.

Instead you can create InfoWindow with data you need and set it to open on click. That way it will be opened when you touch marker on mobile device.

Update

Because you take external json, you can just push new object to it with:

  g.StoreLocatorResp.locationList.push({
    nodename: "My Location",
    address: "My Location address",
    longitude: "28.407081",
    latitude: "-24.704055",
    icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
  });

Example would look something like this (updated with code above):

 $(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 }] } }; g.StoreLocatorResp.locationList.push({ nodename: "My Location", address: "My Location address", longitude: "28.407081", latitude: "-24.704055", icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png" }); 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); for (var i = 0; i < locations.length; i++) { if (locations[i].icon) { var icon = locations[i].icon; } else { var icon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'; } var location = new google.maps.LatLng(locations[i].latitude, locations[i].longitude); var marker = new google.maps.Marker({ position: location, map: map, title: locations[i].nodename + "\\n" + locations[i].address, icon: icon }); var content = locations[i].nodename + "<br/>" + locations[i].address; var infowindow = new google.maps.InfoWindow() google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) { return function() { infowindow.setContent(content); infowindow.open(map, marker); }; })(marker, content, infowindow)); } }); 

 <script src="https://code.jquery.com/jquery-2.1.3.js"></script> <script src="https://maps.google.com/maps/api/js"></script> <div id="map" style="height:600px"></div>