Custom Google Map Pin

[sasquatchParticipant]

Hi there,

Does anyone know how to make a custom Google Map Pin instead of the default red one?

Many thanks for any help 🙂

[JohnnyParticipant]

Hi, you can customize the marker style from here in file bee/js/google.map.core.js:

if(pin == 't'){
			var marker = new google.maps.Marker({
				position: latlng,
				map: google_map
			});
			marker.setAnimation(google.maps.Animation.BOUNCE);
		}

Best

[sasquatchParticipant]

Ok I did this but the map disappears.. any ideas?

		
		if(pin == 't'){
                        var icon = 'image url here'
};
			var marker = new google.maps.Marker({
				position: latlng,
				map: google_map
                                icon: icon
			});
			marker.setAnimation(google.maps.Animation.BOUNCE);
		}
		
	}
	
	
});

Thanks

[JohnnyParticipant]

Hi, try this please:`if(pin == ‘t’){
var marker = new google.maps.Marker({
position: latlng,
map: google_map,
icon: “http://domain.com/img/icon.png”
});
marker.setAnimation(google.maps.Animation.BOUNCE);
}`
Best

[sasquatchParticipant]

Thanks but the map still disappears?

This is the exact code I have:

jQuery(document).ready(function() {
	
	if(jQuery('.module-map-canvas').length > 0){
		jQuery('.module-map-canvas').each(function(index, element) {
            var _this = jQuery(this);
			
			var l = Number(_this.data('l'));
			var r = Number(_this.data('r'));
			var zoom = Number(_this.data('zoom'));
			var pin = _this.data('pin');
			var view = _this.data('view');
			
			map_initialize(element, l, r, zoom, pin, view);
        });
	}
	
	function map_initialize(element, l, r, zoom, pin, view) {
		var geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(l, r);
		var markers = [];
		var map_type;
		switch(view){
			case 'map': map_type = google.maps.MapTypeId.ROADMAP; break;
			case 'satellite': map_type = google.maps.MapTypeId.SATELLITE; break;
			case 'map_terrain': map_type = google.maps.MapTypeId.TERRAIN; break;
		}
		
		var mapOptions = {
			zoom: zoom,
			center: latlng,
			mapTypeId: map_type
		}
		var google_map = new google.maps.Map(element, mapOptions);
		
		if(pin == ‘t’){
var marker = new google.maps.Marker({
position: latlng,
map: google_map,
icon: “http://www.my-logo-url.png”
});
marker.setAnimation(google.maps.Animation.BOUNCE);
}
		
	}
	
	
});

[JohnnyParticipant]

Hi, please leaving your site url here please, I will check it for you later,
Thank you

[sasquatchParticipant]

This reply has been marked as private.

[JohnnyParticipant]

Hi, you are using wrong quotation marks in file google.map.core.js, please update this file with attached please,
Best

[sasquatchParticipant]

Works! Awesome.. Thanks!

[Author]

Posts