Display retailers in google maps

Question

I have a list of retailers and their logos and what I wanted to do was display them on a google map. I suppose the purpose of it is to demonstrate the extend of our market reach.

What I want to do is be able to add the markers, however when I click on them, I would want to replace the text in the speech bubble to my own text, and also insert the retailer logo for that location.

Is this possible? If anyone had any advice as to how I might go about doing this also would be fantastic.

Answer 1

This is certainly possible. First you need to do is use the Google Geocoding service to convert your list of retailers (I assume you have addresses) to a list of retailers with latitudes and longitudes.

Once you have a latitude, longitude information for your retailers you can create google.maps.marker objects for each one and attach them to a google.maps.Map object:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
   zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
 }

// where map_canvas is the id of a div that will contain the map on your page
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// for each of your retailers
{
   var retailerLocation = new google.maps.LatLng(-25.363882,131.044922);
   var retailerMarker = new google.maps.Marker({
      position: retailerLocation , 
      map: map, 
      title:retailerName
    });   
}

You can handle the click event on each of the retailerMarkers and display a google.maps.InfoWindow with the appropriate content (you can control the content of the InfoWindow as you would any other piece of your web UI).