Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 11

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

@omat Strangely Google's own docs don't suggest that there has to be an infoWindow part. But nonetheless it's not working for me either :(

javascript - Google Maps JS API v3 - Simple Multiple Marker Example - ...

javascript google-maps google-maps-api-3
Rectangle 27 21

obeattie and gregers are both right. In general, you need to store the marker parameters in some kind of array which you will later use at-least twice:

  • when adding the overlay to the map
  • when adding it to a GLatLngBounds object to calculate the center point and zoom level

The array or markers would look like an array of objects, something like:

var latlng1 = [
    new GLatLng( 48.1234, -120.1234 ),
    new GLatLng( 48.5678, -120.5678 ),
    new GLatLng( 48.9101, -120.9112 ),
    new GLatLng( 48.1121, -120.1314 ),
    new GLatLng( 48.3145, -120.1516 ),
    new GLatLng( 48.1617, -120.1718 ),
    new GLatLng( 48.1819, -120.1920 ),
    new GLatLng( 48.2021, -120.2122 )
];
// assume that map1 is an instance of a GMap2 object

  // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map
  map1.setCenter( new GLatLng( 0, 0 ), 0 );

  // #1 -- add markers
  for ( var i = 0; i < latlng1.length; i++ )
  {
    var marker = new GMarker( latlng1[ i ] );
    map1.addOverlay( marker );
  }

  // #2a -- calculate center
  var latlngbounds = new GLatLngBounds( );
  for ( var i = 0; i < latlng1.length; i++ )
  {
    latlngbounds.extend( latlng1[ i ] );
  }

  // #2b -- set center using the calculated values
  map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );

As for your question about using server side script inside client side javascript, yes you can mix them together. Judging by your description, i think this is what you need to do:

<script type="text/javascript">
    var latlng1 = new Array( );
</script>
<script type="text/javascript">
    <%
        do until rs.eof
            %>
            latlng1.push( new GLatLng( parseFloat( '<%= rs( "Lat" ) %>' ), parseFloat( '<%= rs( "Lng" ) %>' ) ) );
            <%
            rs.movenext
        loop
    %>
</script>

Since you are going through the same latlng1 array twice why have a single for loop and call map1.addOverlay and latlngbounds in the same loop?

javascript - How to use google maps API with multiple markers on the s...

javascript asp.net google-maps google-maps-api-2
Rectangle 27 5

You'll need to create a new GMarker for each place you want to mark on the map. There is quite good documentation available here for GMarkers.

To create a GMarker, you'll see from the documentation that you first need to create a GLatLng representing the location you want to drop the marker. You haven't mentioned wanting any content in a balloon, so I'm assuming it's just the marker you're after. In your case, the code would probably look something like this:

var markerCoords = [
    new GLatLng(<latitude>, <longitude>),
    new GLatLng(<latitude>, <longitude>),
    [...]
];

for (coord in markerCoords){
    map.addOverlay(new GMarker(coord));
};

I'm sure you can probably tell exactly what's going on here, but just in case, I create an array of GLatLng objects (this can be of any length [within bounds haha]), and then iterate over it, adding markers to the map for each GLatLng defined in the array.

If you are planning on creating a lot of markers, you'll probably find it useful to use the Marker Manager, which will speed up rendering a lot of markers simultaneously (by not rendering off-screen markers and condensing on-screen ones if there are a lot in one region of the screen).

Thanks, how about the last part of my question??? Is it possible to build the Script as a String and then pass it as variable?

javascript - How to use google maps API with multiple markers on the s...

javascript asp.net google-maps google-maps-api-2
Rectangle 27 1

Maybe you should take a look at marker clustering. It's a common solution for showing a lot of markers on the same place. Google article about it: https://developers.google.com/maps/articles/toomanymarkers

There are also existing libraries to do this, e.g.:

The links you provided are useful but not in my case where I will have at most 12 markers on map. My issue is what if they have same exact location.

android - How to handle multiple markers on Google Maps with same loca...

android ios objective-c google-maps google-maps-markers
Rectangle 27 1

obeattie answered your question pretty good. But from your example code, it seems like you also want the map to zoom to the area containing the markers. To do this with multiple markers, you can create a GLatLngBounds that you extend for each marker. You can then get the center and zoom that will fit for your collection of markers from the bounds object.

var markersBounds = GLatLngBounds();
    var coord = null;
    for (coord in markerCoords){
        coord = new GMarker(coord);
        map.addOverlay();
        markersBounds.extend(coord);
    };
var markersCenter = markersBounds.getCenter();
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds);

map.setCenter(markersCenter, markersZoom);

I'm not 100% sure about the G_HYBRID_MAP.getBoundsZoomLevel, but if I remember correctly, G_HYBRID_MAP is an instance of GMapType.

javascript - How to use google maps API with multiple markers on the s...

javascript asp.net google-maps google-maps-api-2
Rectangle 27 0

Both markers are shown, but both on the same location and it seems to be only one, and if you click on them, only one info window will be presented.

A possible workaround could be to check if there is another marker in the position you are trying to draw the marker into, and if so, move the new marker a little bit appart.

Android Google Map multiple markers on same location - Stack Overflow

android google-maps
Rectangle 27 0

Here is a working example. Click map to draw a radius with selected radius and it would display all the markers from all_locations example array which fall inside the radius. Click on a marker to see the distance in meters from the radius center. (Click somewhere around New York's Second Street to see the example markers - map is already centered to that location)

var map = null;
  var radius_circle = null;
  var markers_on_map = [];
  
  //all_locations is just a sample, you will probably load those from database
  var all_locations = [
	  {type: "Restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340},
	  {type: "School", name: "School 1", lat: 40.724705, lng: -73.986611},
	  {type: "School", name: "School 2", lat: 40.724165, lng: -73.983883},
	  {type: "Restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358},
	  {type: "School", name: "School 3", lat: 40.732056, lng: -73.998683}
  ];

  //initialize map on document ready
  $(document).ready(function(){
      var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
      var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	  
	  google.maps.event.addListener(map, 'click', showCloseLocations);
  });
  
  function showCloseLocations(e) {
  	var i;
  	var radius_km = $('#radius_km').val();
  	var address = $('#address').val();

  	//remove all radii and markers from map before displaying new ones
  	if (radius_circle) {
  		radius_circle.setMap(null);
  		radius_circle = null;
  	}
  	for (i = 0; i < markers_on_map.length; i++) {
  		if (markers_on_map[i]) {
  			markers_on_map[i].setMap(null);
  			markers_on_map[i] = null;
  		}
  	}
	
  	var address_lat_lng = e.latLng;
  	radius_circle = new google.maps.Circle({
  		center: address_lat_lng,
  		radius: radius_km * 1000,
  		clickable: false,
  		map: map
  	});
	if(radius_circle) map.fitBounds(radius_circle.getBounds());
  	for (var j = 0; j < all_locations.length; j++) {
  		(function (location) {
  			var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
  			var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
  			if (distance_from_location <= radius_km * 1000) {
  				var new_marker = new google.maps.Marker({
  					position: marker_lat_lng,
  					map: map,
  					title: location.name
  				});
  				google.maps.event.addListener(new_marker, 'click', function () {
  					alert(location.name + " is " + distance_from_location + " meters from my location");
  				});
  				markers_on_map.push(new_marker);
  			}
  		})(all_locations[j]);
  	}
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false&libraries=geometry"});
      </script>

<body style="margin:0px; padding:0px;" >
 
 <select id="radius_km">
	 <option value=1>1km</option>
	 <option value=2>2km</option>
	 <option value=5>5km</option>
	 <option value=30>30km</option>
 </select>
 <div id="map_canvas"  style="width:500px; height:300px;">
</body>

Hi, the code snippet does not work anymore

@ChingChongPa it works for me in Firefox. It depends on browsers settings, etc,.. since it's loading http script from https page. Try it on your localhost, should work in any browser. If you get 'no API key' error, you can try to load the Google Maps JS api as described here: developers.google.com/maps/documentation/javascript/tutorial instead of the google.load("maps".. way from the example.

javascript - Finding all the markers inside a given radius - Stack Ove...

javascript algorithm google-maps
Rectangle 27 0

You need to set the imagePath property of the MarkerClusterer correctly (to a location that contains the images for the clusters). One possible source is the google sample:

var markerCluster = new MarkerClusterer(map, markers,
   {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
var map, infoBubble;

function initialize() {
  var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
  $('#user_latitude').val(52.5167);
  $('#user_longitude').val(13.3833);

  var mapOptions = {
    zoom: 3,
    center: mapCenter,
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER
    },
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    minZoom: 3,
    scrollwheel: false
  };


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


  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var markers = [];
  //       <?php foreach($pets as $pet):?>
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.5167, 13.3833),
    /*<?php //if():?>
    icon: 'http://cdn.com/my-custom-icon.png',
    <?php //else:?>
    icon: 'http://cdn.com/my-custom-icon.png',
    <?php //endif;?>*/
  });
  markers.push(marker);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.5167, 13.38),
    /*<?php //if():?>
    icon: 'http://cdn.com/my-custom-icon.png',
    <?php //else:?>
    icon: 'http://cdn.com/my-custom-icon.png',
    <?php //endif;?>*/
  });
  markers.push(marker);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.51, 13.3833),
    /*<?php //if():?>
    icon: 'http://cdn.com/my-custom-icon.png',
    <?php //else:?>
    icon: 'http://cdn.com/my-custom-icon.png',
    <?php //endif;?>*/
  });
  markers.push(marker);
  //        <?php endforeach;?>
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });



}


google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
<input id="user_latitude" />
<input id="user_longitude" />

javascript - Google maps MarkerClusterer displaying number instead of ...

javascript google-maps google-maps-api-3 markerclusterer
Rectangle 27 0

Both markers are shown, but both on the same location and it seems to be only one, and if you click on them, only one info window will be presented.

A possible workaround could be to check if there is another marker in the position you are trying to draw the marker into, and if so, move the new marker a little bit appart.

Android Google Map multiple markers on same location - Stack Overflow

android google-maps
Rectangle 27 0

$nearest=1; //Limit within 1 KM.

$("#jobnews").html("<h2>Results:</h2>"); 
$.each(info.companies.company, function(index, job)
{ 
    var lat = list.location.lat; 
    var lng = list.location.lng; 
    var nam = current.location.lat; 
    var cou = current.location.lng; 
    //In below line we will get the distance between current and given coordinates.
    var d=distance(nam, cou, lat, lng, "K");
    //Check the d is within 1 KM, If so then add it to map.
    if(nearest>d)
    {
        var map = "</p><img src='maps.google.com/maps/api/staticmap?center="; + lat + "," +lng +"&zoom=17&size=400x300&key="+key+"&maptype=roadmap&visual_refresh=true&markers=color:red|"+lat+","+lng+"&sensor=true'width='300' height='280'alt='Map of your location.'/>"; 
        var nearestList = "<div><h3>DISPLAY INFO: "+lis.name+link+nam+lat+lng+cou+map+"</div>"; 
    }
}  

function distance(lat1, lon1, lat2, lon2, unit) {
    var radlat1 = Math.PI * lat1/180
    var radlat2 = Math.PI * lat2/180
    var radlon1 = Math.PI * lon1/180
    var radlon2 = Math.PI * lon2/180
    var theta = lon1-lon2
    var radtheta = Math.PI * theta/180
    var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
    dist = Math.acos(dist)
    dist = dist * 180/Math.PI
    dist = dist * 60 * 1.1515
    if (unit=="K") { dist = dist * 1.609344 }
    if (unit=="N") { dist = dist * 0.8684 }
    return dist
}

lat1, lon1 = Latitude and Longitude of point 1 (in decimal degrees) lat2, lon2 = Latitude and Longitude of point 2 (in decimal degrees) unit = the unit you desire for results where: 'M' is statute miles 'K' is kilometers (default) 'N' is nautical miles

Call your the function with your current location and nearest location coordinates, consider the smallest distance return by function?

Hello, This is my code: $("#jobnews").html("<h2>Results:</h2>"); $.each(info.companies.company, function(index, job){ var lat = list.location.lat; var lng = list.location.lng; var nam = current.location.lat; var cou = current.location.lng; var map = "</p><img src='maps.google.com/maps/api/staticmap?center= + lat + "," +lng +"&zoom=17&size=400x300&key="+key+"&maptype=roadmap&visual_refresh=true&markers=color:red|"+lat+","+lng+"&sensor=true'width='300' height='280'alt='Map of your location.'/>"; var nearestList = "<div><h3>DISPLAY INFO: "+lis.name+link+nam+lat+lng+cou+map+"</div>";

It looks very messy but I am not allowed to go pass the text limit in stackoverflow. I would like to know if your code can be run with my code here. Thank you very much!

google maps - How to display the nearest latitude and longitude to my ...

javascript google-maps
Rectangle 27 0

InfoWindows may be attached to either Marker objects (in which case their position is based on the marker's location) or on the map itself at a specified LatLng. If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks). Unlike behavior in V2 of the Google Maps API, however, a map may now display multiple InfoWindow objects if you so choose.

function generateInfoWindow(despacedName, despacedTitle, eventTitle, url, date, time){
    if(!curInfoWindow){
        curInfoWindow = new google.maps.InfoWindow({maxWidth:150});
    }
    curInfoWindow.setContent("<a class=\"eventLink\" href=\""+url+"\">"+eventTitle+"</a><br><br>"+markerObjects[despacedName].title+"<br>"+date+" at "+time);
    curInfoWindow.open(map, markerObjects[despacedName]);
    alert(despacedName+" is "+markerObjects[despacedName]);
}

According to the specs, this should move the existing curInfoWindow to a new marker and update the content.

new google.maps.InfoWindow(options = {size: new google.maps.Size(150,50)})

There is no size attribute. The best you can do is

new google.maps.InfoWindow({maxWidth:150})

javascript - Opening a second InfoWindow in Google Maps API v3 - Stack...

javascript google-maps google-maps-api-3
Rectangle 27 0

Here is a working example. Click map to draw a radius with selected radius and it would display all the markers from all_locations example array which fall inside the radius. Click on a marker to see the distance in meters from the radius center. (Click somewhere around New York's Second Street to see the example markers - map is already centered to that location)

var map = null;
  var radius_circle = null;
  var markers_on_map = [];
  
  //all_locations is just a sample, you will probably load those from database
  var all_locations = [
	  {type: "Restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340},
	  {type: "School", name: "School 1", lat: 40.724705, lng: -73.986611},
	  {type: "School", name: "School 2", lat: 40.724165, lng: -73.983883},
	  {type: "Restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358},
	  {type: "School", name: "School 3", lat: 40.732056, lng: -73.998683}
  ];

  //initialize map on document ready
  $(document).ready(function(){
      var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
      var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	  
	  google.maps.event.addListener(map, 'click', showCloseLocations);
  });
  
  function showCloseLocations(e) {
  	var i;
  	var radius_km = $('#radius_km').val();
  	var address = $('#address').val();

  	//remove all radii and markers from map before displaying new ones
  	if (radius_circle) {
  		radius_circle.setMap(null);
  		radius_circle = null;
  	}
  	for (i = 0; i < markers_on_map.length; i++) {
  		if (markers_on_map[i]) {
  			markers_on_map[i].setMap(null);
  			markers_on_map[i] = null;
  		}
  	}
	
  	var address_lat_lng = e.latLng;
  	radius_circle = new google.maps.Circle({
  		center: address_lat_lng,
  		radius: radius_km * 1000,
  		clickable: false,
  		map: map
  	});
	if(radius_circle) map.fitBounds(radius_circle.getBounds());
  	for (var j = 0; j < all_locations.length; j++) {
  		(function (location) {
  			var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
  			var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
  			if (distance_from_location <= radius_km * 1000) {
  				var new_marker = new google.maps.Marker({
  					position: marker_lat_lng,
  					map: map,
  					title: location.name
  				});
  				google.maps.event.addListener(new_marker, 'click', function () {
  					alert(location.name + " is " + distance_from_location + " meters from my location");
  				});
  				markers_on_map.push(new_marker);
  			}
  		})(all_locations[j]);
  	}
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false&libraries=geometry"});
      </script>

<body style="margin:0px; padding:0px;" >
 
 <select id="radius_km">
	 <option value=1>1km</option>
	 <option value=2>2km</option>
	 <option value=5>5km</option>
	 <option value=30>30km</option>
 </select>
 <div id="map_canvas"  style="width:500px; height:300px;">
</body>

Hi, the code snippet does not work anymore

@ChingChongPa it works for me in Firefox. It depends on browsers settings, etc,.. since it's loading http script from https page. Try it on your localhost, should work in any browser. If you get 'no API key' error, you can try to load the Google Maps JS api as described here: developers.google.com/maps/documentation/javascript/tutorial instead of the google.load("maps".. way from the example.

javascript - Finding all the markers inside a given radius - Stack Ove...

javascript algorithm google-maps