How can I add two locations into same google map for website

Question

I am working on including two locations on same google map. Here I have included one location , how can I include another location which have Latitude and Longitude as 51.626778, 0.513829. If I include same as our previous India address, by adding Latitude and Longitude means of comma, It does not work. The below is My JS and HTML

I have integrated google map using API "http://maps.google.com/maps/api/js?sensor=false "

HTML: <div id="Map"></div>

CSS:#map{ width:100%; height:450px;}

JS:

var locations = [
    ['<div class="infobox"><h3 class="title"><a href="#contact">OUR INDIA ADDRESS</a></h3></div></div></div>',  12.996868, 80.209891, 2]

    ];

    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 13,
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        styles: [ { "stylers": [ { "hue": "#ff6501" },  {saturation: 20},
            {gamma: 1} ] } ],
        center: new google.maps.LatLng( 12.996868, 80.209891),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  

        marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map ,
        icon: 'images/marker1.png'
        });


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);

        }
      })(marker, i));
    }

Kindly guide me on this , Thanks for the help.

Edit : Yes same way displaying multiple location simultaneously, with marker

Answer 1

Your code works. Just create a new item in array:

var locations = [ 
    ['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],
    ['OUR INDIA ADDRESS 2', 12.976868, 80.209891, 2]
];

The coordinates that you you gave as example [51.626778, 0.513829] is in europe.

See working: http://jsfiddle.net/adrianogodoy/325ukwsg/2/

Answer 2

your location variable should be like this

   var locations = [ ['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],['OUR INDIA ADDRESS', 51.626778, 0.513829, 2]]

here in the below example its clearly shows how to added multiple location to a map. Here is the sample where you can add multiple marker icon's and on click we can place a marker and in info window we can show the address.

<script>
var locations = [
       ['Hyderabad', 17.38504, 78.48667],
       ['Chennai', 13.08268, 80.27072],
       ['Bangalore', 12.97160, 77.59456],
       ['Mumbai', 19.07598, 72.87766],
       ['Pune', 18.52043, 73.85674]
];
var Hyderabad = new google.maps.LatLng(17.38504, 78.48667);
var Chennai = new google.maps.LatLng(13.08268, 80.27072);
var Bangalore = new google.maps.LatLng(12.97160, 77.59456);
var mumbai = new google.maps.LatLng(19.07598, 72.87766);
var map = null;
function initialize() {
    var mapProp = {
        center: Hyderabad,
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            content: locations[i][0]
        });
        var infowindow = new google.maps.InfoWindow({
            content: locations[i][0]
        });
        marker.setMap(map);
    }
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
        geocodeLatLng(geocoder,map,infowindow,event.latLng)
    });

}

function placeMarker(location) {
    debugger;
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true
    });
    //var infowindow = new google.maps.InfoWindow({
    //    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    //});
    //infowindow.open(map, marker);
    //geocodeLatLng(geocoder,map,infowindow);
}

function geocodeLatLng(geocoder, map, infowindow, latlang) {
    debugger;
    //var input = latlang;
    //var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlang.lat()), lng: parseFloat(latlang.lng()) };
    geocoder.geocode({'location': latlng}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                //map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    });
}

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