Question

I’m trying to get different markers to render to the frontend from the database.
The std marker is all good, and now is time to add red, green markers etc. Been banging my head on this keyboard for too long. (Yes I’m new to this – sorry)

In the JavaScript Console I’m getting an error

“Uncaught ReferenceError: GPoint is not defined” on the – var customIcons = {

Here is my code – (Thanks in advance!)

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[

var customIcons = {

"Boat Ramp": {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                iconAnchor: new GPoint(0,0),
                infoWindowAnchor: new GPoint(0,0)
        },
  "Landbased - Saltwater": {
                        icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                iconAnchor: new GPoint(0,0),
                infoWindowAnchor: new GPoint(0,0)
  },


  "Boat - Salt Water": {
    image: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                iconAnchor: new GPoint(0,0),
                infoWindowAnchor: new GPoint(0,0)
  }
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(-41.284882, 173.268570),
    zoom: 5,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;


  downloadUrl("123.php", function(data) {
    var xml = data.responseXML;
    var Sheet1 = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < Sheet1.length; i++) {
      var Type = Sheet1[i].getAttribute("Type");
      var Description = Sheet1[i].getAttribute("Description");
      var Comments = Sheet1[i].getAttribute("Comments");
      var Lat = Sheet1[i].getAttribute("Lat");
      var Lng = Sheet1[i].getAttribute("Lng");
      var point = new google.maps.LatLng(
          parseFloat(Sheet1[i].getAttribute("Lat")),
          parseFloat(Sheet1[i].getAttribute("Lng")));
      var html = "<b>" + Type + "</b> <br/>" + Description + "<br/>" + Comments +"<b><br/>Latitude " + Lat + "<b><br/>Longitude " + Lng;


      var icon = customIcons[Type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function drop() {   for (var i =0; i < markerArray.length; i++) {     setTimeout(function() {       addMarkerMethod();     }, i * 200);   } }

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

//]]>

Answer 1

The problem is that while you are referencing version 3.5.9 of google maps API, the code you’ve written is against version 2. There’s no GPoint class anymore in version 3 and that’s why you are getting the error.

I suggest that you use google.maps.Marker class in v3 instead. See the documentation for more details.