Question

I am struggling to apply a icon zoom level change function to my google maps api script.

My current icon size is 48px and the actually graphic is also 48px.

jsfiddle.net/motocomdigital/hQkb3/6

Determined like this…

var image = new google.maps.MarkerImage(
  '<?php bloginfo('template_url'); ?>/images/marker-images/image-48px.png',
  new google.maps.Size(48,48),
  new google.maps.Point(0,0),
  new google.maps.Point(24,48)
);

I don’t suppose it is possible to change these sizes and graphics depending on 3 zoom levels?

For example, when a zoom is at…

Zoom Level 0 > 6 – uses…

  '<?php bloginfo('template_url'); ?>/images/marker-images/image-12px.png',
  new google.maps.Size(12,12),
  new google.maps.Point(0,0),
  new google.maps.Point(6,6)

Zoom Level 6 > 8 – uses…

  '<?php bloginfo('template_url'); ?>/images/marker-images/image-24px.png',
  new google.maps.Size(24,24),
  new google.maps.Point(0,0),
  new google.maps.Point(12,12)

Zoom Level 8+ – uses…

  '<?php bloginfo('template_url'); ?>/images/marker-images/image-48px.png',
  new google.maps.Size(48,48),
  new google.maps.Point(0,0),
  new google.maps.Point(24,24)

This is my original script below…

jQuery(function($){

    var image = new google.maps.MarkerImage(
      '<?php bloginfo('template_url'); ?>/images/marker-images/image.png',
      new google.maps.Size(48,48),
      new google.maps.Point(0,0),
      new google.maps.Point(24,24)
    );

    $('#map_div').gmap3({
        action:'init',
        options: {
            center:[<?php echo $lt;?>,<?php echo $lo;?>],
            zoom: 7,
            scrollwheel: false
        }
    },
    {
        action: 'addMarkers',
        markers: [ <?php echo $lat_long;?> ],
        marker: {
            options: {
                draggable: false,
                icon: image             
            },
            events:{
            mouseover: function(marker, event, data){
                var map = $(this).gmap3('get'),
                    infowindow = $(this).gmap3({ action:'get', name:'infowindow' });
                if (infowindow) {
                    infowindow.open(map, marker);
                    infowindow.setContent(data);
                } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
                }
            },
            mouseout: function(){
                var infowindow = $(this).gmap3({ action:'get', name:'infowindow' });
                if (infowindow){
                    infowindow.close();
                }
            }
        }

    }
    });
});

I am really not great with this level of scripting, and any pointers ideas or help would be great thanks.

Josh

Answer 1

I added a “zoom_changed” event to your map that changes all marker icons according to the zoom level.

function UseMarkerIcon(imageObj)
{
  var markers=$("#map_div").gmap3({action:'get',name:'marker',all:true});
  $.each(markers, function(i,marker)
  {
    marker.setIcon(imageObj);
  });  
}

jQuery(function($) {    
    var image12px = new google.maps.MarkerImage('http://motocomdigital.co.uk/assets/marker-images/map-marker-12px.png', new google.maps.Size(12, 12), new google.maps.Point(0, 0), new google.maps.Point(6, 6));    
    var image24px = new google.maps.MarkerImage('http://motocomdigital.co.uk/assets/marker-images/map-marker-24px.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 12));    
    var image48px = new google.maps.MarkerImage('http://motocomdigital.co.uk/assets/marker-images/map-marker-48px.png', new google.maps.Size(48, 48), new google.maps.Point(0, 0), new google.maps.Point(24, 24));

    $('#map_div').gmap3({
        action: 'init',
        options: {
            center: [50.799019, -1.132037],
            zoom: 5,
            scrollwheel: false
        },
              events:{
                      zoom_changed: function(map){
                          var zoomLevel = map.getZoom();

                          if (zoomLevel < 6)
                            UseMarkerIcon(image12px);
                          else if (zoomLevel >= 6 && zoomLevel <=8)
                            UseMarkerIcon(image24px);
                          else
                            UseMarkerIcon(image48px);
                      }
              }
    }, {
        action: 'addMarkers',
        markers: [{
            lat: 50.799019,
            lng: -1.132037,
            data: 'Test One'},
        {
            lat: 50.365162,
            lng: -4.712017,
            data: 'Test Two'},
        {
            lat: 54.518726,
            lng: -5.881054,
            data: 'Test Three'},
        {
            lat: 52.780964,
            lng: -1.211863,
            data: 'Test Four'},
        {
            lat: 51.433998,
            lng: -2.549690,
            data: 'Test Five'}],
        marker: {
            options: {
                draggable: false,
                icon: image12px
            },
            events: {
                mouseover: function(marker, event, data) {
                    var map = $(this).gmap3('get'),
                        infowindow = $(this).gmap3({
                            action: 'get',
                            name: 'infowindow'
                        });
                    if (infowindow) {
                        infowindow.open(map, marker);
                        infowindow.setContent(data);
                    } else {
                        $(this).gmap3({
                            action: 'addinfowindow',
                            anchor: marker,
                            options: {
                                content: data
                            }
                        });
                    }
                },
                mouseout: function() {
                    var infowindow = $(this).gmap3({
                        action: 'get',
                        name: 'infowindow'
                    });
                    if (infowindow) {
                        infowindow.close();
                    }
                }

            }

        }
    });
});

The function UseMarkerIcon(image) iterates through all your markers and sets the image you pass to it.