Created
February 12, 2013 21:15
-
-
Save jlittlejohn/4773456 to your computer and use it in GitHub Desktop.
JS: Embed Google Maps
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
<script type="text/javascript"> | |
//<![CDATA[ | |
// Create an array of styles. | |
var styles = [ | |
{ | |
stylers: [ | |
{ saturation: -85 } | |
] | |
},{ | |
featureType: 'road', | |
elementType: 'geometry', | |
stylers: [ | |
{ hue: "#002bff" }, | |
{ visibility: 'simplified' } | |
] | |
},{ | |
featureType: 'road', | |
elementType: 'labels', | |
stylers: [ | |
{ visibility: 'off' } | |
] | |
} | |
], | |
// put your locations lat and long here | |
lat = 51.607, | |
lng = -0.12248, | |
// Create a new StyledMapType object, passing it the array of styles, | |
// as well as the name to be displayed on the map type control. | |
styledMap = new google.maps.StyledMapType(styles, | |
{name: 'Styled Map'}), | |
// Create a map object, and include the MapTypeId to add | |
// to the map type control. | |
mapOptions = { | |
zoom: 14, | |
scrollwheel: false, | |
center: new google.maps.LatLng( lat, lng ), | |
mapTypeControlOptions: { | |
mapTypeIds: [google.maps.MapTypeId.ROADMAP] | |
} | |
}, | |
map = new google.maps.Map(document.getElementById('map'), mapOptions), | |
charlotte = new google.maps.LatLng( lat, lng ), | |
marker = new google.maps.Marker({ | |
position: charlotte, | |
map: map, | |
title: "Hello World!" | |
}); | |
//Associate the styled map with the MapTypeId and set it to display. | |
map.mapTypes.set('map_style', styledMap); | |
map.setMapTypeId('map_style'); | |
//]]> | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment