ansaurus

Question

How do I show white pop up box on custom Google Map?

Answer 1

A:

The pop-up box that you are talking about is called the info window in google map language.

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("your contents");
});

The above code binds a click event with your marker and opens an info window with the specified text. here marker is the marker object.

Hope it helps.

anand 2010-09-10 12:51:33

Answer 2

A:

The way to do this is to create one global infowindow and then reuse it again and again, this way the infowindow is just moved to each marker, and the content of the info window can be changed using the setContent method. Read here and there is a Google Demo accessable from the api reference site. I had the same problem when I was making a map for my site,

The following code should work:

<script type="text/javascript">
var map;
var marker;
var infowindow;   //Global infowindow created
function initialize() {
  var latlng = new google.maps.LatLng(42.098687,-75.917974);
  var restaurants = new Array();
  restaurants = [ 
         new google.maps.LatLng(42.898687,-75.917974),
         new google.maps.LatLng(42.698687,-73.917974),
         new google.maps.LatLng(42.198687,-75.917974),
         new google.maps.LatLng(41.098687,-75.917974)
         ];
   var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    infowindow = new google.maps.InfoWindow({   //infowindow options set
               maxWidth: 355  
    });

    var i = 0; 
    for ( i <0; i < restaurants.length;i++ ){
           marker = new google.maps.Marker({
                      position: restaurants[i],
                      map:map,
                      title:"Testing!"
               });
            popupDirections(marker);
       }
}

function popupDirections(marker) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}
</script>

If you want separate content for each marker (which I assume you will) you can pass some content into the popupDirections() function, modified with a string for the content "html":

function popupDirections(marker, html) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}

adustduke 2010-09-10 18:48:43

ansaurus

tags:

views:

answers:

How do I show white pop up box on custom Google Map?

related questions