We help IT Professionals succeed at work.

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

egoselfaxis
egoselfaxis asked
on
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
Comment
Watch Question

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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.

Author

Commented:
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?
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Ok, I read your question again. "What I can't seem to figure out is how to insert some additional red markers by updating the Javascript:"

I think that plug in is working by adding html instead of updating the javaascipt. Where is the link to your plug in?  I tried to find it myself and all I came up with the author's site which is just a nav bar and then found git https://github.com/ZemezPlugins. Also https://zemez.io/html/support/knowledge-base/addchange-map-markers-based-rd-google-map/

If you add multiple LI tags with different lat/lon, are you not seeing multiple map markers?  

You have the li's commented out
 <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>
				
                <!--<li data-x="-94.380427" data-y="29.115507" data-basic="images/amenities-gallery28-thumb.jpg"
                    data-active="images/gmap_marker_active.png">
                    <p> 666 boop lane! <span>Call 666-666-666</span></p>
                </li>	

                <li data-x="-96.380427" data-y="31.115507" data-basic="images/amenities-gallery10-thumb.jpg"
                    data-active="images/gmap_marker_active.png">
                    <p> 666 boop lane! <span>Call 666-666-666</span></p>
                </li>//-->	

Open in new window

If you uncomment one and change the lat/lon, do you see multiple markers?

Author

Commented:
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