Add marker to google map in jquery

September 26, 201871
Share Tweet Pin it

Use the following jquery in your js file or script area.

$(document).on('click','.get-located',function(arg){
        arg.preventDefault();
        var location=new google.maps.LatLng($(this).attr('data-location-lat'), $(this).attr('data-location-lon'));
        addmarker(location);
    });
    var US = new google.maps.LatLng(36.2066111, -113.7480101);

    var noStreetNames = [{
    featureType: "road",
    elementType: "labels",
    stylers: [{
        visibility: "off"}]}];

    hideLabels = new google.maps.StyledMapType(noStreetNames, {
        name: "hideLabels"
    });


    var myOptions = {
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: US
    }

    map = new google.maps.Map(document.getElementById("map_go"), myOptions);
    directionsDisplay.setMap(map);

    function offsetCenter(latlng, offsetx, offsety) {
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng());

        var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
        var pixelOffset = new google.maps.Point((offsetx / scale) || 0, (offsety / scale) || 0)

        var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x, worldCoordinateCenter.y + pixelOffset.y);

        var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

        map.setCenter(newCenter);
    }

    function addmarker(latilongi) {
        var marker = new google.maps.Marker({
            position: latilongi,
            title: 'new marker',
            draggable: true,
            map: map
        });

        var infowindow = new google.maps.InfoWindow({
            content: ''
        });
        map.setZoom(10);
        map.setCenter(marker.getPosition())
        //infowindow.open(map, marker)
    }