Home Forums Bee WordPress Theme Custom Google Map Pin

This topic contains 8 replies, has 2 voices, and was last updated by  sasquatch 3 years, 1 month ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2892

    sasquatch
    Participant

    Hi there,

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

    Many thanks for any help 🙂

    #2899

    Johnny
    Participant

    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

    #2912

    sasquatch
    Participant

    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

    #2913

    Johnny
    Participant

    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

    #2925

    sasquatch
    Participant

    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);
    }
    		
    	}
    	
    	
    });
    #2933

    Johnny
    Participant

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

    #2937

    sasquatch
    Participant
    This reply has been marked as private.
    #2941

    Johnny
    Participant

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

    #2944

    sasquatch
    Participant

    Works! Awesome.. Thanks!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.