asked on

Need help adding 2 additional markers to embedded Google Map using API

I need to figure out how to add some additional markers to the embedded google map that's on this page:

http://benderslandingestates.com/contact.html

I've already figured out how to add the image overlays that display the addresses when clicked. All I have to do is add an additional unordered list item similar to the following and then change it's X and Y coordinates and the image file name:

<li data-x="-95.380427" data-y="30.115507" data-basic="images/BLE-map-marker.png" data-active="images/gmap_marker_active.png">
                    <p>3440 Riley Fuzzel Rd, Suite 150, Spring, TX 77386 <span>Call 281-364-7440</span></p>
 </li>

Open in new window

What I can't seem to figure out is how to insert some additional red markers by updating the Javascript:

http://benderslandingestates.com/js/jquery.rd-google-map.js

The section that needs to be re-written -- I suspect -- is the following:

defaults = {
            map: {
                x: -95.3726757,
                y: 30.1183008,
                zoom: 13
            },
            locations: []
        };

Open in new window

.. but I'm not entirely sure. Can anyone here be of any assistance? How would I add - say - 2 additional X / Y coordinates to the Javascript so that it shows 2 additional markers in the embedded Google map?

Thanks,
-- Yvan

Scott Fell

Looking at the docs, I think you just need to add to locations[].

Review the api https://developers.google.com/maps/documentation/javascript/markers and find the "complex" example

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: -33.9, lng: 151.2}
  });

  setMarkers(map);
}

// 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) {
  // Adds 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 = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: 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 = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

Open in new window

The link to example is confusing, it is below, not above that bit of code https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/icon-complex

That example uses beaches[] instead of locations[]. The point is to add your data there.

egoselfaxis

ASKER

I'd already tried that .. meaning adding an array of locations to the existing Javascript. But no additional markers were displayed on the map after I made the changes. What doesn't make sense is that I currently have no locations specified .. yet the X and Y coordinates that are already being specified are resulting in the expected single marker. Is there no way to simply add some additional X and Y coordinates?

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

A ha !!! Guess what I just discovered. That little round red marker that I'm seeing plotted on map is actually in the alpha transparent image! This whole time, I was certain that it was being added there using javascript! No wonder I've been spinning my wheels!

http://benderslandingestates.com/images/BLE-map-marker.png

So I guess it really is as simple as just adding the additional list items and changing the coordinates and image URLs.

Thanks for your help and your time Scott,
-- Yvan