PDA

View Full Version : Integrating a Marker Animation Script with a Styled Google Map Script



KennyP
03-23-2018, 03:55 AM
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 (http://www.billyjoeconor.com/robertjmaleycom/#contact)

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:


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:


/* 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:


<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>

KennyP
03-30-2018, 10:58 AM
Thanks anyway, but I already have it done.