Diplay different Marker in Google Maps API V3 based on PHP value

Question

I have gotten to the point of passing a value from set of Markers created via PHP but I can not figure out how to create or implement the IF condition to show the Marker Image related to the Type value.

Code:

<script type="text/javascript">


var iconStar = new google.maps.MarkerImage("googleMarkers/star.png",
                  new google.maps.Size(32, 28), 
                  new google.maps.Point(0, 0),
                 new google.maps.Point(16, 32));


var iconBlue = new google.maps.MarkerImage("images/mm_20_blue.png",
                  new google.maps.Size(12, 20), 
                  new google.maps.Point(0,0),
                 new google.maps.Point(6, 20));



var iconRed =  new google.maps.MarkerImage("images/mm_20_red.png",
                  new google.maps.Size(12, 20), 
                  new google.maps.Point(6, 20),
                 new google.maps.Point(5, 1));

var iconYellow  = new google.maps.MarkerImage("images/mm_20_yellow.png",
                  new google.maps.Size(12, 20), 
                  new google.maps.Point(6, 20),
                 new google.maps.Point(5, 1));

iconType = [] = iconStar;
iconType["0"] = iconStar;
iconType["1"] = iconBlue;
iconType["2"] = iconRed;
iconType["3"] = iconYellow;



        var center = null;
        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();

        function addMarker(lat, lng, info, type) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
               icon: iconType,
                map: map
            });


            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });


            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
               // panTo puts you back to the original center - not good for zoomed in nav
               // map.panTo(center);
                currentPopup = null;
            });
        }


        function initMap() {
            map = new google.maps.Map(document.getElementById("map"),  {
                center: new google.maps.LatLng(0, 0),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                },
                navigationControl: true,
                navigationControlOptions: {
                 style: google.maps.NavigationControlStyle.DEFAULT
                }

            });







 <?php
 do {
 $name=$row_rsCity['DEALER']; 
 $lat=$row_rsCity['lat'];
  $lon=$row_rsCity['lng'];
  $desc=$row_rsCity['ADDRESS'];
  $city=$row_rsCity['CITY'];
  $state=$row_rsCity['STATE'];
  $phone=$row_rsCity['PHONENUMBER'];
  $type=$row_rsCity['DEALER_TYPE'];
  echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , $state<br />Phone: $phone',$type);\n");
  } while ($row_rsCity = mysql_fetch_assoc($rsCity));
  ?>
  center = bounds.getCenter();
  map.fitBounds(bounds);

  }

I'm close but I can't find similar examples online so looking for a little help in solving this issue.

Thanks!

icon: iconType, changed to icon: iconType[type], returns only the iconStar or zero value and then iconBlue but not further. Changing to icon: iconType["type"], Returns no custom Markers only default Google red markers It seems it's a matter of passing the values correctly and if not wrapped in quotation marks operates as a Booleen on or off but when wrapped in quotes fails to pass or understand the value.. — Burndog, Feb 02 '12 at 22:02

score 1 · Accepted Answer · edited May 23 '17 at 09:59

1

When you call the function addMarker, you need to pass the type of icon (numeric) via the type in your function list.

Then when you are adding the marker. :

function addMarker(lat, lng, info, type) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
               icon: iconType[type],
                map: map
            });

Add in the numeric type to reference the correct icon in your icon array.......

I haven't ever done it this way before but I don't see why it wouldn't work.

If that doesn't work you may want to look at this example. :

Change individual markers in google maps directions api V3

Google Maps API v3: How do I dynamically change the marker icon?

edited May 23 '17 at 09:59

Community

1
1

answered Feb 02 '12 at 20:48

Bill Blankenship

3,316
6
43
73

Thanks but that turns the iconType into a function and throws an error. UPDATE: Brackets seems to be returning positive results and my being able to catch the difference between a bracket and a parenthesis requirement holds hope for my future :-) – Burndog Feb 02 '12 at 21:49
I adjusted the iconType[type] above to brackets is that working now? – Bill Blankenship Feb 02 '12 at 22:18
Further review shows the problem with other colors rendering were in the individual icon contructions. Brackets solved the problem. Thanks Smith – Burndog Feb 02 '12 at 22:51

Diplay different Marker in Google Maps API V3 based on PHP value

1 Answers1