Placeholder Google Maps without plugin

  • Resolved Gabriel

    (@gbrlb)


    3 years, 10 months ago

    Hello ??

    I have a Google Maps on a website without plugin.

    I load the API JS in my header :
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxx" defer></script>

    And this is my JS :

    function initGoogleMaps() {
	var latitude = $('#google_maps').attr('data-lat'),
		longitude = $('#google_maps').attr('data-lng'),
		url = $('#google_maps').attr('data-url');

	var options = {
		disableDefaultUI: true,
		zoom: 16,
		center: new google.maps.LatLng(latitude, longitude),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.LARGE,
			position: google.maps.ControlPosition.LEFT_BOTTOM
		},
		scrollwheel: false,
		streetViewControl: false,
		mapTypeControl: false,
		draggable: true
	}

	var map = new google.maps.Map(document.getElementById('google_maps'), options);

	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(latitude, longitude),
		map: map,
		animation: google.maps.Animation.DROP,
		icon: new google.maps.MarkerImage(blogInfo.url+'/wp-content/themes/test/images/pin.svg'),
		url: url
	});

	google.maps.event.addListener(marker, 'click', function() {
		window.open(this.url, '_blank');
	});
}
initGoogleMaps();

    So I put my JS in the script center in the async textarea.
    All is work, the map is loaded only if the user has accepted the cookies. But I don’t have the placeholder if the user has not yet accepted the cookies.

    Could you help me ?
    Thank you !

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    You can place a placeholder if you know which class the div container has:

    /**
 * Add a placeholder to a div with class "my-maps-class"
 * @param $tags
 *
 * @return mixed
 */
function cmplz_custom_maps_placeholder( $tags ) {
	$tags['google-maps'][] = "my-maps-class";
	return $tags;
}
add_filter( 'cmplz_placeholder_markers', 'cmplz_custom_maps_placeholder' );

    If you have a URL where I can take a look, I can check the class for you.

    Thread Starter Gabriel

    (@gbrlb)

    Perfect! ??
    It’s exactly what I need!

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Placeholder Google Maps without plugin’ is closed to new replies.