Dropping marker with google maps api and javascript

Question

Hi so I'm working a google maps element into an app I'm writing and am having trouble dropping a pin on the user's current location.

I can get the map to load a fusion table layer of pins, and center on the user's current location, but I'd like to be able to then drop a marker at the user's current location, and resize the map to fit all the markers. Is this possible? If not I can just set the zoom to an appropriate level.

This is the code I'm working with:

var geocoder = new google.maps.Geocoder();
function initialize() {
    map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
       center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
       zoom: 12,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    layer = new google.maps.FusionTablesLayer({
       map: map,
       heatmap: { enabled: false },
       query: {
          select: "col2, col0",
          from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
          where: ""
       },
       options: {
          styleId: 3,
          templateId: 3
       }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

I should also say that the [app:user-lat] and [app:user-lon] calls are application specific, taking data from the mobile device, and will work to insert the current user's location. This is the reason I'm not doing a call for the current position through google maps api, thanks in advance for anyone taking the time to help.

Answer 1

To place a marker at the user's position, add this after you define your map:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
    map: map
});

If you want to move it as the user moves, that will be a little more complicated, keep a reference to it and use marker.setPosition.

function initialize() {
    map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
       center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
       zoom: 12,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
        map: map
    });


    layer = new google.maps.FusionTablesLayer({
       map: map,
       heatmap: { enabled: false },
       query: {
          select: "col2, col0",
          from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
          where: ""
       },
       options: {
          styleId: 3,
          templateId: 3
       }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

To center the map on the markers (or zoom the map to show them all, you will need to query the FusionTable for all the markers, construct a google.maps.LatLngBounds object from their locations, then use that as an argument to map.fitBounds.

Here are a couple of examples that do that (but with a different column layout (two column location) than your table. The concept can be adjusted for your column layout (query for the single column location, parse it to create a google.maps.LatLng and add it to the google.maps.LatLngBounds):

• http://www.geocodezip.com/v3_FusionTablesLayer_centerOnMarkers.html
• http://www.geocodezip.com/www_vciregionmap_comC.html

example that zooms and centers the map on the data in your table . Notes:

1. The GViz API that is used is limited to 500 rows, if you have more data that that you probably don't want to do this anyway.
2. The maps is centered on the data not the user.