Custom Google Map Code

[RecipeSocial]

Hi Bill,

When I save the following custom Google map code into the map section on the theme options it appears to not save all of the code and therefore doesn’t display the map.

<script src=’https://maps.googleapis.com/maps/api/js?key=AIzaSyCk-W6wOHBtEqCoXNwK_J3toZka4jDrQEI&sensor=false&extension=.js’></script&gt;

<script>
google.maps.event.addDomListener(window, ‘load’, init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(66.713857,-180.772706),
zoom: 8,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: true,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{“stylers”:[{“hue”:”#2c3e50″},{“saturation”:250}]},{“featureType”:”road”,”elementType”:”geometry”,”stylers”:[{“lightness”:50},{“visibility”:”simplified”}]},{“featureType”:”road”,”elementType”:”labels”,”stylers”:[{“visibility”:”off”}]}],
}
var mapElement = document.getElementById(‘ThalassaSeafoodRestaurant’);
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
[‘Thalassa Seafood Restaurant’, ‘Nestled in the heart of Southgate, Thalassa Seafood Restaurant and Bar delivers a dining experience which will transport you to the wondrous islands of the Mediterranean Sea.’, ‘020 8886 4191’, ‘enquiries@thalassaseafood.co.uk’, ‘www.thalassaseafood.co.uk’, 51.63365549634099, -0.13167972527003258, ‘https://mapbuildr.com/assets/img/markers/default.png’%5D
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] ==’undefined’){ description =”;} else { description = locations[i][1];}
if (locations[i][2] ==’undefined’){ telephone =”;} else { telephone = locations[i][2];}
if (locations[i][3] ==’undefined’){ email =”;} else { email = locations[i][3];}
if (locations[i][4] ==’undefined’){ web =”;} else { web = locations[i][4];}
if (locations[i][7] ==’undefined’){ markericon =”;} else { markericon = locations[i][7];}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
if (web.substring(0, 7) != “http://&#8221;) {
link = “http://&#8221; + web;
} else {
link = web;
}
bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, ‘click’, function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html= “<div style=’color:#000;background-color:#fff;padding:5px;width:150px;’><h4>”+title+”</h4><p>”+desc+”<p><p>”+telephone+”<p>“+email+”“+web+”</div>”;
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, ‘closeclick’, function () {
infoWindowVisible(false);
});
}
}
</script>
<style>
#ThalassaSeafoodRestaurant {
height:400px;
width:940px;
}
.gm-style-iw * {
display: block;
width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
}
</style>

<div id=’ThalassaSeafoodRestaurant’></div>

It works fine with the iFrame, but I can’t figure a way to change the colour with iFrame.

Any idea why the code isn’t getting saved in it’s entirety?

Thanks,
Christian.

[Bill Robbins]

Good Morning Christian,

You are correct. The inputs in the theme options are set up to filter out virtually all HTML for security reasons. Inputs like the one for the map are actually one of the doors hackers look for in trying to gain access to a site so most HTML is not allowed there for security.

Since you’re the end user here, it would be better just to edit the contact file and place the code there. It won’t be a security issue and as a bonus you won’t have to worry about your client accidentally deleting or otherwise messing up the map.

What you’ll need to do is edit the home-contact.php file and find this line near the top:

<?php echo of_get_option('contact_map'); ?>

Just replace that with your custom Google map and that should take care of it for you. If it gives you trouble, let me know.

Have a great week,
Bill

[RecipeSocial]

This reply has been marked as private.

[Bill Robbins]

Hey Christian,

I took a look and it doesn’t appear that the file was edited. This is the part you’ll want to replace in the layouts/home-contact.php file:

	<?php if(of_get_option('contact_map', $single = true) != ""){ ?>
	
		<div class="contact-map">
			
			<?php echo of_get_option('contact_map'); ?>
			
		</div>
	
	<?php } ?>

I would have changed that for you, but when code is posted in the forum, the greater than, less than and other items are converted to HTML entities from their original code.

Bill

[RecipeSocial]

Hi Bill,

Thanks for taking a look.

I think i’ve gotten myself in a right muddle here.

Is the layouts/home-contact.php the same as: moonrise/page-contact.php ?

I added the attached map code to moonrise/page-contact.php

I can’t find the code you mention above.

Help!

Thanks,
Christian.

Attachments:

1. map-code-1.rtf

[Bill Robbins]

The layouts/home-contact.php is the file you want to work with. The page-contact.php loads the contact information when you’re using the contact page template on a page.

But the code to replace is the same in both files. It’s at the top and looks like this:

<?php if(of_get_option('contact_map', $single = true) != ""){ ?>
		
	<div class="contact-map">
				
		<?php echo of_get_option('contact_map'); ?>
				
	</div>
		
<?php } ?>

Give that an edit and see how it goes. If you can’t get it, go to http://gist.github.com and enter the embed code for your map there. Then copy the link to that “gist” and paste the link here (not the embed code, just the URL to the gist. I can copy it from there and add it in for you.

Bill

[RecipeSocial]

Hi Bill,

I’ve added the code to the layouts/home-contact.php all okay. But I think I’ve messed up the code in the page-contact.php and can’t undo what i’ve done, unfortunately.

I’ve attached a screen shot of what’s showing on the front end.

I pasted the code into GitHub

https://gist.github.com/006d307d3072cc51e446.git

Hopefully I done it right?

Let me know if you need anything else from me and thanks again for your all help.

Christian

Attachments:

1. 

   Screen-shot-2015-07-08-at-15.31.32.jpg
   

[Bill Robbins]

Hey Christian,

Post the code for the map at Github instead of the code of the page template. I can change it for you, but I need the map code. Posting it in the forum ruins the code. That’s why I can’t use what you posted here earlier. Post it directly to Github from Google and then add the link here.

Bill

[RecipeSocial]

Hi Bill,

Apologies for that.

Code looks the same to me, pretty much…

I have created another Gist here: https://gist.github.com/3d4f8c021ddcd90b976f.git

Hopefully this is what you need.

Thanks,
Christian.

[Bill Robbins]

I’m afraid that gist doesn’t even remotely look like the code you posted the first time for your map. I do understand it “all looks the same” but you can look at the characters and see if it’s right or not. If your copying and pasting, check the first and last lines to make sure they look the same and most of the time you’re good to go.

At this point, there are two options. You can go back to a Google map that can be added via an iFrame. You can also try a Google Maps plugin that lets you add a map via a shortcode. I changed the spot where the map is output so that you could use a shortcode there if you need to.

[RecipeSocial]

Hey Bill,

Thanks for your patience and perseverance.

I don’t know how you doing this coding malarkey, it drives me mad at times…

Thanks for cleaning up the contact/map area and for adding the shortcode feature.

I will take a look at this tomorrow now.

Thanks again for your help, it’s really appreciated. 🙂

Christian.

[Author]

Posts