✔ build a map for realtree's location. learn how to use custom icon to show location on embedded google map. want map to be greyscale
(Completed by Taylor Bernard on July 24, 2015)
Comments
Taylor Bernard on July 24, 2015:
researched how to add custom icon. real easy.
but do we need to hold up on making the map? going to run into the same issue as with webb. to embed have to have an API and email tied to it.
Taylor Bernard on July 24, 2015:
having a few glitches trying to get map working. issues with key, everything else is good.
heres all the supplied code. i have the script src tag in the top after main.css
the script code i have in the main.js
style i took the style tag out and put rest in css
and map div at the bottom is my default
saying not auth to used key. but i copied all permissions like i was using on webb, so that shouldnt be issue.
Comments
Taylor Bernard on July 24, 2015:
but do we need to hold up on making the map? going to run into the same issue as with webb. to embed have to have an API and email tied to it.
Taylor Bernard on July 24, 2015:
heres all the supplied code. i have the script src tag in the top after main.css
the script code i have in the main.js
style i took the style tag out and put rest in css
and map div at the bottom is my default
saying not auth to used key. but i copied all permissions like i was using on webb, so that shouldnt be issue.
should the script code go somewhere else?
-----
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAR4LkCsOccY1-CPcRsfS8caF-EsWMrpAU&sensor=false&extension=.js'></script>
------------
<script>
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(32.501076,-84.766618),
zoom: 10,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: false,
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: false,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"all","elementType":"all","stylers":[{"saturation":-100},{"gamma":0.5}]}],
}
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Realtree', 'undefined', 'undefined', 'undefined', 'undefined', 32.4749085, -84.93357459999999, '
];
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
});
link = ''; }
}
</script>
------------
<style>
#map {
height:475px;
width:100%px;
}
.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='map'></div>
Justin Bernard on July 24, 2015:
Taylor Bernard on July 24, 2015:
Taylor Bernard on July 24, 2015:
Justin Bernard on July 24, 2015: