Results 1 to 2 of 2

Thread: Integrating a Marker Animation Script with a Styled Google Map Script

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default Integrating a Marker Animation Script with a Styled Google Map Script

    Hi:

    I'm building a website for a friend and I'd like to animate the marker that is now on a google map,
    so that when the map comes into view, the marker drops down from the top of the map onto the
    coordinates already set for it. The map and marker can be seen here:

    Website


    The code in Script 1 accomplishes the dropping of the marker from the top of the map when it
    comes into view on the screen. The code in Script 2 is mainly the styled map itself.

    Problem: How can the code in script 1 be integrated into the code of script 2 (the map's
    styling code), so that the marker does drop when the map is in view?

    Thanks for any help,

    Kenny

    Script 1:


    Code:
    function initMap() {
    // check if the user can see the map using $('#map').visible()
        if ($('#map').visible()) {
            //if the user can see the map stop checking
            clearInterval(myVar);
    
            var map = new google.maps.Map(document.getElementById('sc_googlemap_1339375003'), {
                zoom: 13,
                center: { lat: 38.852380, lng: -105.857800}
            });
    
            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: { lat: 38.852380, lng: -105.757800 }
            });
            marker.addListener('click', toggleBounce);
        }
    }
    
    function toggleBounce() {
        if (marker.getAnimation() !== null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    Script 2:


    Code:
    /* global jQuery:false */
    /* global CLOE_BROOKS_STORAGE:false */
    
    
    // Template-specific first load actions
    //==============================================
    function cloe_brooks_theme_ready_actions() {
    	"use strict";
    	// Put here your init code with Template-specific actions
    	// It will be called before core actions
    }
    
    
    // Template-specific scroll actions
    //==============================================
    function cloe_brooks_theme_scroll_actions() {
    	"use strict";
    	// Put here your Template-specific code with scroll actions
    	// It will be called when page is scrolled (before core actions)
    }
    
    
    // Template-specific resize actions
    //==============================================
    function cloe_brooks_theme_resize_actions() {
    	"use strict";
    	// Put here your Template-specific code with resize actions
    	// It will be called when window is resized (before core actions)
    	setTimeout(ColumnsFitLargerHeight, 20);
    }
    
    
    // Template-specific shortcodes init
    //=====================================================
    function cloe_brooks_theme_sc_init(cont) {
    	"use strict";
    	// Put here your Template-specific code to init shortcodes
    	// It will be called before core init shortcodes
    	// @param cont - jQuery-container with shortcodes (init only inside this container)
    }
    
    
    // Template-specific post-formats init
    //=====================================================
    function cloe_brooks_theme_init_post_formats() {
    	"use strict";
    	// Put here your Template-specific code to init post-formats
    	// It will be called before core init post_formats when page is loaded or after 'Load more' or 'Infinite scroll' actions
    }
    
    // Fit height to the larger value of child elements
    function ColumnsFitLargerHeight() {
    	if (jQuery('.autoheight.columns_wrap').length > 0) {
    		jQuery('.autoheight.columns_wrap').each(function () {
    			"use strict";
    			var tallestcolumn = 0;
    			var columns = jQuery(this).children("div");
    			columns.css({"height":"auto"});
    			columns.each(
    				function () {
    					var currentHeight = jQuery(this).height();
    					if (currentHeight > tallestcolumn) {
    						tallestcolumn = currentHeight;
    					}
    				}
    			);
    			if (jQuery(window).width() > 479) {
    				columns.height(tallestcolumn);
    			} else {
    				columns.css({"height":"auto"});
    			}
    		});
    	}
    }
    
    // Template -specific GoogleMap styles
    //=====================================================
    function cloe_brooks_theme_googlemap_styles($styles) {
    	"use strict";
    	// Put here your Template-specific code to add GoogleMap styles
    	// It will be called before GoogleMap init when page is loaded
    	$styles['greyscale'] = [
        	{ "stylers": [
            	{ "saturation": -100 }
                ]
            }
    	];
    	$styles['inverse'] = [
    		{ "stylers": [
    			{ "invert_lightness": true },
    			{ "visibility": "on" }
    			]
    		}
    	];
    	$styles['standart'] = [{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"color":"#f7f1df"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#d0e3b4"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","elementType":"geometry","stylers":[{"color":"#fbd3da"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#bde6ab"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#FFBB6B"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efd151"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"black"}]},{"featureType":"transit.station.airport","elementType":"geometry.fill","stylers":[{"color":"#cfb2db"}]},  {
            "featureType": "landscape",
            "elementType": "all",
            "stylers": [
                {
                    "color": "#DEDEDE"
                }
            ]
        },{"featureType":"water","elementType":"geometry","stylers":[{"color":"#72B5CA"}]}];
    	return $styles;
    	
    }

    The HTML:


    Code:
    <div id="sc_googlemap_1339375003" class="sc_googlemap" data-zoom="13" data-style="standart">
        <div id="sc_googlemap_1339375003_1" class="sc_googlemap_marker" data-title="Suite 107, 1322 North Academy Boulevard" data-description="USA, Colorado Springs, CO 90809" data-address="1318 North Academy Boulevard, Colorado Springs, CO 80909" data-latlng="38.852380,-104.757800" data-point="images/map_marker.gif"></div>
    </div>
    Last edited by KennyP; 03-24-2018 at 09:22 AM.

  2. #2
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Thanks anyway, but I already have it done.

Similar Threads

  1. Integrating a text fade script with a text display script
    By Jim Weinberg in forum JavaScript
    Replies: 6
    Last Post: 10-10-2014, 03:42 PM
  2. Problem integrating Conveyor Belt slideshow script
    By T.Kick in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 09-11-2010, 05:50 PM
  3. Integrating Facebox (v 1.1) with Photo Album script (v2.0)
    By shoomway in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-19-2009, 08:44 AM
  4. Replies: 1
    Last Post: 05-19-2008, 12:38 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •