Google Maps: Given the Lat Long coordinates

Question

I have the the following Lat Long coordinates (in a JS array), how can we draw the Google Map with markers on these coordinates.

Please give a simple example, as the examples in the API documentation do not really give a conclusive answer or are too complex for me.

43.82846160000000000000, -79.53560419999997000000

43.65162010000000000000, -79.73558579999997000000

43.75846240000000000000, -79.22252100000003000000

43.71773540000000000000, -79.74897190000002000000

Thanks in advance.

Answer 1

You may try this

var map,
locations = [
    [43.82846160000000000000, -79.53560419999997000000],
    [43.65162010000000000000, -79.73558579999997000000],
    [43.75846240000000000000, -79.22252100000003000000],
    [43.71773540000000000000, -79.74897190000002000000]
];
var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(locations[0][0], locations[0][1]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent('Current location is: '+ locations[i][0]+', '+locations[i][1]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

DEMO.

Answer 2

I have worked with google maps and if you just need to place a few markers (make sure you are using API v3) v2 is depreciated and will fall off at some point. Next, your lat/long coords. They need to be clipped down to 9 or 10 chars. I have been unlucky when I go with super-long lat/long Coords values.

Google has a nice tool that lets you build a map with. Start here:

https://developers.google.com/maps/documentation/javascript/

Realize you will need a key on your webhosts domain. You can get your key here:

https://developers.google.com/maps/signup

A long list of demos, with 65 v3 API examples.

https://developers.google.com/maps/documentation/javascript/demogallery

In the demos i found this example which looks to be close. Reuse the code you find by viewing the source. You can see the lat/long coord pairs and how it calls it with this link.

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/data.js

Here is a campus map example.

http://beta.gr-3.net/map-api/

Finally, here is the simplest example. A one marker map. Look at the source and reuse it. Hopefully it will be enough to get you started.

https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple

I hope all this is helpful.

Answer 3

First, you would create google maps object, somewhere within head tag you would listen for ready event and in the handler have:

var mapOptions = 
    {
      zoom: 10,
      center: new google.maps.LatLng( <%= @drawings.first.latitude %>, <%= @drawings.first.longitude %> ),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

This assumes you have a div in your html with id map_canvas.

Than you should be ready to add markers to the page, you should have your coordinates stored in an array, so you can iterate through it and those markers.

for( var i=0; i < coords.length; i++ )
{
     latlng = coords[i].latitude + ", " + coords[i].longitude;

     var marker = new google.maps.Marker({
      position: latlng, 
      map: map,
      title: '',
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(coords.length + 65) + ".png"
    }); 
}