RPeraltaJr
3/7/2017 - 9:23 PM
Google Maps API
Visit https://developers.google.com/maps/documentation/javascript/tutorial to ‘GET A KEY'
1. Go to https://developers.google.com/maps/documentation/javascript/tutorial and click ‘GET A KEY'
2. Copy and paste API Key on your notes
3. Modify your [map.js] file
4. For more settings visit the Google Console
5. To find coordinates use www.gps-coordinates.net// GOOGLE MAPS API - https://developers.google.com/maps/documentation/javascript/tutorial
function initMap() {
// Styles (created @ https://mapstyle.withgoogle.com/)
vistaprintMapStyles = [
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#523735"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c9b2a6"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#191919"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.province",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#808080"
}
]
},
{
"featureType": "administrative.province",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#bee493"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#93817c"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#c1e397"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#447530"
}
]
},
{
"featureType": "road",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#b3b3b3"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [
{
"color": "#666666"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#e98d58"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#b3b3b3"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#806b63"
}
]
},
{
"featureType": "transit.line",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8f7d77"
},
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ebe3cd"
},
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "water",
"stylers": [
{
"color": "#5ac3f6"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#60a5e1"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"color": "#ffffff"
}
]
}
];
// Vistaprint Map
var vistaprintMap = new google.maps.Map(document.getElementById('map'), {
scrollwheel: false,
zoom: 3,
center: {lat: 36.5994134, lng: -9.67314650000003},
styles: vistaprintMapStyles
});
setMarkers(vistaprintMap);
}
// Coordinates - http://www.gps-coordinates.net/
var locations = [
['Ahmedabad, India', 23.022505, 72.57136209999999, 1],
['Berlin, Germany', 52.52000659999999, 13.404953999999975, 1],
['Waltham, MA, USA', 42.3764852, -71.23561130000002, 1],
['Sydney, Australia', -33.8688197, 151.20929550000005, 1],
['Manila, Philippines', 14.5995124, 120.9842195, 1],
['Windsor, Canada', 42.3149367, -83.0363633, 1],
['Reno, NV, USA', 39.5296329, -119.8138027, 1],
['Barcelona, Spain', 41.38506389999999, 2.1734034999999494, 1],
['Toronto, Canada', 43.653226, -79.38318429999998, 1],
['Venlo, Netherlands', 51.3703748, 6.172403099999997, 1],
['Tunis, Tunisia', 36.8064948, 10.181531599999971, 1],
['Silver Spring, MD, USA', 38.99066570000001, -77.02608800000002, 1],
['Montego Bay, Jamaica', 18.4762228, -77.8938895, 1],
['London, UK', 51.5073509, -0.12775829999998223, 1]
];
function setMarkers(vistaprintMap) {
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://careers.vistaprint.com/wp-content/themes/vistaprint-careers/assets/build/img/vp-marker.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var marker = new google.maps.Marker({
position: {lat: location[1], lng: location[2]},
map: vistaprintMap,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
}
}<html>
<head></head>
<body>
<!-- Map -->
<div id="map" style="height: 500px; width: 100%;"></div>
<!-- Include the following scripts before the closing body tag -->
<script src="assets/js/map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>