CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Aubyn Shortland
Aubyn Shortland

Reputation: 11

Can embedded google map be auto updated without the need to manually refresh it?

Apologies if this appears basic but I am new to using google products. I am creating a map with markers representing events at the weekend for a website. Is there a way of my embedded weekend map having new markers and data added by myself just adding new data to the google sheet and not having to refresh the embedding code

Thanks

Upvotes: 1

Views: 1120

Answers (1)

durbnpoisn
durbnpoisn

Reputation: 4669

In short, yes. The longer answer is too broad to provide specific code. But I can explain how to do it.

You need to make an AJAX call to your data source to get your new data points. So the page is built dynamically with JavaScript. I actually have a working model of how this can be done. You can examine the source on this page for a better idea. Travel tacking webApp

You will have to create an account, and create a trip, in order to see how it works. But here is the relevant code. (PHP for the data. JavaScript for everything else.) Oh, and this example doesn't use AJAX. It was just a suggestion for your situation.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script> 

<script type="text/javascript">
    function codeLatLong() {
    var geocoder = new google.maps.Geocoder();
    var address = "64 martha dr hamilton, CA 90210";
    address = document.getElementById("addressIs").value;

    geocoder.geocode({
        'address': address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();


            document.getElementById("latIs").value = latitude;
            document.getElementById("lonIs").value = longitude;

            initialize(latitude, longitude);

        }

    });
}

    function initialize(latitude, longitude) {
        var latlng = new google.maps.LatLng(lats[1], longs[1]);

        var myOptions = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        //var marker = new MarkerWithLabel({
                var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            labelContent: streets[1],
            labelAnchor: new google.maps.Point(-7, 20),
            labelClass: "labels",
            title: "location : home"
        });
        for (xx=2;xx<lats.length;xx++){
        var latlng = new google.maps.LatLng(lats[xx], longs[xx]);
            //marker = new MarkerWithLabel({
                        marker = new google.maps.Marker({  
            position: latlng,
            map: map,
            labelContent: streets[xx],
            labelAnchor: new google.maps.Point(-7, 20),
            labelClass: "labels",
            title: "location : home"
        });
        }
    }


//codeLatLong();
//initialize(40, -75);
</script>

Upvotes: 1

Related Questions