Google Maps API v3 Point of Interest with Custom Icons

Question

I have a page stretching in the schools, churches and parks of my given area, but I want to create 3 POIs with three different icons. I searched Google and even all the documents, but could not find the answer.

var map; var infowindow; function initialize() { // Center of Map var centerLatlng = new google.maps.LatLng(29.745376, -95.380125); // Marker Icons Declaration var icon = new google.maps.MarkerImage("smLinks-twitter.png", null, null, new google.maps.Point(41,47)); // Map Options var myOptions = { zoom: 16, center: centerLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, icons: icon }; // Draw the map map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Marker Icons Implementation markers = new google.maps.Marker({ position: centerLatlng, map: map, title: 'Center of Map', icon: icon }); // Services: Places var request = { location: centerLatlng, radius: 800, types: ["school", "church", "park"] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.search(request, callback); } // function initialize() function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { createMarker(results[i]); } } } function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: icon }); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">'); infowindow.open(map, this); }); } 

Answer 1

Please see my quick and dirty Demo . The idea is to use the place.types array to determine which place you want to add to the map. I simplistically assigned a marker to the first element of this array (usually 2 or 3 elements), which might look something like this:

 ["school", "establishment"] 

In some cases, a "university" comes in front of a "school", so the university icon is used. You need to clarify how you map types to icons, that is, to give priority to a school or university? Perhaps iterating through the array is looking for suitable types. One place (general_contractor) is not on my list of icons, so the default output marker is placed by default. You can use the default icon if you checked whether iconType has the type you iconType or not. I will leave this data to you =)

Here is the source I used for the icons: https://sites.google.com/site/gmapsdevelopment/

 function createMarker(place) { var placeLoc = place.geometry.location; var iconType = {}; iconType['school'] = "http://maps.google.com/mapfiles/kml/pal2/icon2.png"; iconType['church'] = "http://maps.google.com/mapfiles/kml/pal2/icon11.png"; iconType['park'] = "http://maps.google.com/mapfiles/kml/pal2/icon12.png"; iconType['university'] = "http://maps.google.com/mapfiles/kml/pal2/icon14.png"; var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: iconType[place.types[0]] }); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">'); infowindow.open(map, this); }); } 

Alternatively, use the switch statement:

 function createMarker(place) { var placeLoc = place.geometry.location; var iconUrl; switch (place.types[0]) { case 'school': iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon2.png"; break; case 'church': iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon11.png"; break; case 'park': iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon12.png"; break; case 'university': iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon14.png"; break; default: iconUrl = "http://maps.google.com/mapfiles/kml/pal4/icon39.png"; } var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: iconUrl }); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">'); infowindow.open(map, this); }); }