Enable google map API on contact page?

Posted in : Photographer

Participant

17 October 2015 at 12:48

#26201

I see in the contact html code for a google map, but it doesn’t show in the demo or in the downloaded archive. I can see formatting for it in the css, but it doesn’t display.

Am I being dumb, but I can’t see a way to get this visible – the code looks OK, but nothing displayed.

ahmetsali

Keymaster

18 October 2015 at 08:43

#26211

Hi, yes there is google map code in the contact page but it is commented and not shown on demo site by default, but it should work fine if you just uncomment this code piece;

<div class="top-content">
        
    <div class="map">
        <div data-latitude="-25.363882" data-longitude="131.044922" data-zoom="5" id="map-canvas" class="map-canvas"></div>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    </div>

</div>

marky9074

Participant

18 October 2015 at 10:43

#26212

Ahhh, feel really stupid now. I was editing the page in notepad, and didn’t see it was commented out. Thanks again for the help.

marky9074

Participant

19 October 2015 at 23:56

#26248

One more quick question. I have seen other templates remove the controls from the google map. Doing a search I have found that the

disableDefaultUI: true

element removes the controls, but I’ve tried putting it in the css and html and neither seems to work.

Ideally I would also like to change the map to be black and white or greyscale.

Any ideas?

ahmetsali

Keymaster

21 October 2015 at 10:56

#26253

Hi again, edit js/main.js in a text editor, at line : 299 you will see the codes related to google map, just replace it with this;

// ------------------------------
		// GOOGLE MAP
		/*
			custom map with google api
			check out the link below for more information about api usage
			https://developers.google.com/maps/documentation/javascript/examples/marker-simple
		*/
		function initializeMap() {
			if($('.map').length) {
				var 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":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];
				var mapCanvas = $('#map-canvas');
				var myLatlng = new google.maps.LatLng(mapCanvas.data("latitude"),mapCanvas.data("longitude"));
				var mapOptions = {
					zoom: mapCanvas.data("zoom"),
					center: myLatlng,
					disableDefaultUI: true,
					styles: styles
				}
				var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
				
				var marker = new google.maps.Marker({
				  position: myLatlng,
				  map: map
		  	});
			}
		  
		}
		if($('.map').length) {
			google.maps.event.addDomListener(window, 'load', initializeMap);
		}
		// ------------------------------

marky9074

Participant

21 October 2015 at 11:59

#26254

That’s fantastic, thanks again. I didn’t think to dig through the js folder.

ahmetsali

Keymaster

21 October 2015 at 12:04

#26256

you’re welcome, i am glad it helped.