Search code examples
javascripthtmlgoogle-mapsintel-xdk

How to pan on google maps?


I'm working on simple App which provide for our clients our branches location, I use now a snapshot of the map, but I want to show the location on real map (Pan) not just an image.

I use Intel XDK platform (HTML/Javascribt)

This is the code I use:

function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}

        
        var output = document.getElementById("mapp");
        function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=400x400&sensor=false";

    output.appendChild(img);
  };
  
        
        output.innerHTML = "<p>Locating…</p>";
        navigator.geolocation.getCurrentPosition(success, onError);


Solution

  • I found the answer, just by changing success function to:

    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    
    var bangalore = { lat: 12.97, lng: 77.59 };
    var map = new google.maps.Map(document.getElementById('mapp'), {
    zoom: 14,
    center: bangalore
    });
    

    var beachMarker = new google.maps.Marker({ position: bangalore, map: map, });