CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3drupal
Glenn B
Glenn B

Reputation: 21

Set custom store marker on storeLocator.Store in Google

I'm trying to set a custom marker for each of my stores. Using the Google storelocator, there is a storeLocator.Store with a .setMarker option.

I tried a lot 

var store = new storeLocator.Store(store_id, position, storeFeatureSet, storeProps);
var markerPin = new google.maps.Marker(
  icon: 'http://url-to-marker.png'
});
store.setMarker(markerPin);

I've been trying to find something on Google but there isn't much out there on the storelocator project.

Upvotes: 0

Views: 278

Answers (1)

AniV
AniV

Reputation: 4037

I managed to find out the GIT repository of the store locator project. In this repository there are sample examples and the files that demonstrates the placement of the markers. If you dig into the examples directory and check out the file places.js. You can find the code of how places get populate with the markers. I am adding a small code snippet, for a detailed overview you can see the whole project.

google.maps.event.addDomListener(window, 'load', function() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-28, 135),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var panelDiv = document.getElementById('panel');

  var data = new PlacesDataSource(map);

  var view = new storeLocator.View(map, data);

  var markerSize = new google.maps.Size(24, 24);
  view.createMarker = function(store) {
    return new google.maps.Marker({
      position: store.getLocation(),
      icon: new google.maps.MarkerImage(store.getDetails().icon, null, null,
          null, markerSize)
    });
  };

  new storeLocator.Panel(panelDiv, {
    view: view
  });
});

Upvotes: 1

Related Questions