Question

I’ve been following the Grails and Google Maps tutorial by IBM, here

I noticed that it’s for Google Maps API v2. I tried to do the same thing using v3 syntax but I’m clearly doing something wrong. I got the example in the tutorial to work, so it get the lat and lng from the db. I’m at the office now and don’t have my example available for pasting.

But the question is pretty much, how would I write the below code to work using Google Maps v3 instead. I’ll update the post once I’m home.

    <script type="text/javascript">
  var usCenterPoint = new GLatLng(39.833333, -98.583333)
  var usZoom = 4

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"))
    map.setCenter(usCenterPoint, usZoom)
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl()); 

      <g:each in="${airportList}" status="i" var="airport">
         var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
      var marker${airport.id} = new GMarker(point${airport.id})
      marker${airport.id}.bindInfoWindowHtml("${airport.iata}<br/>${airport.name}")
         map.addOverlay(marker${airport.id})
      </g:each>
  }
}

All I’m trying to do is to display the markers in airportList on the map.
Thanks!

Answer 1

I solved it like this. There are probably other solutions too, but this works.

function initialize() {
  var myOptions = {
    som options...
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  setMarkers(map, markers);
  var markers = [];

g:each in="${airportList}" status="i" var="airport"
  var latlng = new google.maps.LatLng(${airport.lat}, ${airport.lng});

  var marker${airport.id} = new google.maps.Marker({
    position: latlng,
    map: map,
    title:"${airport.name}",
    icon: 'http://google-maps-icons.googlecode.com/files/factory.png',
  });
g:each

Hope this helps! You have to open and close the g:each tags, but if i add the “<” and “>” then the code disappears. :s