-
Posts
-
Hello everyone! First of all i would like to thank you for your great support here. My questions is can i put a google map in a slider, so i can put an animated text or image into/above it? i would like to use this map with the color and marker for the slider:
http://tweer-loesenbeck.webdemo.rechenzentrum-luedenscheid.de/kontakt/
or is it easier to put just a text without animation into a standard google maps element with div or something else.
Thanks for your help and suggestionsHey Patrick!
Unfortunately the google maps were not meant to be used with the sliders and it would take a lot of time and code to enable that functionality so it would have to be considered custom work.
What you can do is add your text into a marker in the google map. When you click on a marker there will be a small tooltip that displays where you can add HTML.
Cheers!
ElliottJust another question about google maps. is it possible create a custom google map with
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html?utm_medium=twitter
and put it in a textbox with html. if yes where i have to put the js ?!Hi!
You can place HTML, CSS, and Javascript inside a codeblock element but not in a textblock element.
Regards,
ElliottOk. Now i tried so much and nothing happend. I used the exampe from the forum here
https://kriesi.at/support/topic/how-to-use-code-block/
and it works fine.
Then i tried to put this
http://snazzymaps.com/style/15/subtle-grayscale
into the code block and nothing happend.
Here is the code:<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script> <script type="text/javascript"> // When the window has finished loading create our google map below google.maps.event.addDomListener(window, 'load', init); function init() { // Basic options for a simple Google Map // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions var mapOptions = { // How zoomed in you want the map to start at (always required) zoom: 11, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(40.6700, -73.9400), // New York // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the <body> var mapElement = document.getElementById('map'); // Create the Google Map using out element and options defined above var map = new google.maps.Map(mapElement, mapOptions); } </script>I also used the CSS & Javascript Toolbox Plugin to put JS into the header nothing happend. Maybe im to dumb for this ***** ;)
Can u help me just to put this google map into the codeblock ?
Ill give u a test admin for my pageHi!
You need to add the div container with the map id below the script.
<div id="map"></div>Then add a custom width and height for the container on Quick CSS:
div#map { width: 100%; height: 500px; }Cheers!
Ismaelok that works almost perfect. i just dont have the fullwidth of the map
http://tweer-loesenbeck.webdemo.rechenzentrum-luedenscheid.de/unternehmen/konstruktion/Hi!
You’d need to remove the padding of the content container, try adding this to Quick CSS:
.page-id-4085 .main_color .container { padding: 0; }Cheers!
Josue
- The topic ‘Google Maps in a Slider’ is closed to new replies.