CODEWITHSUNDEEP
jquerygoogle-maps-api-3
weggie
weggie

Reputation: 447

When I click on a google map marker can I use ajax to update a Div?

I have a google map that I have created and its building markers from a database. I am filling those markers with information from the DB. What I would like to do is fill in that information on a div to the right of the map. My thinking is that if I can send the ID of the marker via ajax to a page that will look up the information and reload that page with the information. I am at best an ajax neophyte and I'm not sure where to begin.

Thanks for any help.

Upvotes: 2

Views: 3369

Answers (3)

geocodezip
geocodezip

Reputation: 161324

Here is an example that works by clicking on polygons rather than markers (but the concept is the same):

http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

code snippet (with markers):

var map = null;

function createMarker(latLng, html) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  google.maps.event.addListener(marker, 'click', function() {
    document.getElementById('info').innerHTML = html;
  });
}

function openIW(layerEvt) {
  if (layerEvt.row) {
    var content = layerEvt.row['admin'].value;
  } else if (layerEvt.featureData) {
    var content = layerEvt.featureData.name;
  }
  document.getElementById('info').innerHTML = "you clicked on:<br>" + content;
}

function initialize() {
  var chicago = new google.maps.LatLng(36.4278, -15.9);
  var myOptions = {
    zoom: 0,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  createMarker({
    lat: 42,
    lng: -72
  }, "United States");
  createMarker({
    lat: 42,
    lng: 72
  }, "Russia");
  createMarker({
    lat: 37.9838096,
    lng: 23.7275388
  }, "Athens, Greece");
  createMarker({
    lat: -8.783195,
    lng: -55.491477
  }, "South America");

}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="http://maps.googleapis.com/maps/api/js"></script>
<table>
  <tr>
    <td>
      <div id="map_canvas" style="height:200px; width:300px;"></div>
    </td>
    <td>
      <div id="info"></div>
    </td>
  </tr>
</table>

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117314

It's not difficult when you use jQuery, I would suggest to use the load-method. It starts a ajax-request and loads the response into the target:

google.maps.event.addListener(marker, 'click', function() {
          $('#divID').load('some.php?id=123');
        });

(where divID is the ID of the element where you wnat the response to appear)

Upvotes: 1

david strachan
david strachan

Reputation: 7228

When you create marker you insert html into the infoWindow see line var html

function createMarker(latlng, name, id) {
var html = "<b> Marker " + id + "</b> <br/><br/><button onclick='doIt("+id+")'>Do It</button>";var image = "icons/XX.png";
  var shadow = "icons/XXX.png";
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: image,
    shadow: shadow
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });

}

The function doIt(id) will do Ajax to reload.

Upvotes: 0

Related Questions