Created
January 20, 2015 06:00
-
-
Save aabir/99de10bd5d3debf52a90 to your computer and use it in GitHub Desktop.
Google map API version 3 example
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 type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> | |
<script> | |
function initialize() { | |
// Create an array of styles. | |
var styles = [ | |
{ | |
"featureType": "landscape", | |
"elementType": "geometry.fill", | |
"stylers": [ | |
{ "visibility": "off" } | |
] | |
},{ | |
"featureType": "water", | |
"elementType": "geometry", | |
"stylers": [ | |
{ "visibility": "off" } | |
] | |
},{ | |
"featureType": "road", | |
"elementType": "geometry.fill", | |
"stylers": [ | |
{ "visibility": "on" }, | |
{ "color": "#ffffff" } | |
] | |
},{ | |
"featureType": "road.arterial", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ "visibility": "on" }, | |
{ "color": "#303030" } | |
] | |
},{ | |
"featureType": "road.arterial", | |
"elementType": "labels.text.stroke", | |
"stylers": [ | |
{ "visibility": "off" } | |
] | |
},{ | |
"featureType": "road", | |
"elementType": "geometry", | |
"stylers": [ | |
{ "visibility": "simplified" } | |
] | |
},{ | |
"featureType": "road.highway", | |
"elementType": "labels.icon", | |
"stylers": [ | |
{ "visibility": "off" } | |
] | |
} | |
,{ | |
"featureType": "road", | |
"elementType": "geometry.fill", | |
"stylers": [ | |
{ "visibility": "on" }, | |
{ "color": "#ffffff" }, | |
{ "weight": 7.5 } | |
] | |
} | |
,{ | |
"featureType": "road.arterial", | |
"elementType": "geometry.fill", | |
"stylers": [ | |
{ "visibility": "on" }, | |
{ "color": "#00adc8" } | |
] | |
} | |
]; | |
// Create a new StyledMapType object, passing it the array of styles, | |
// as well as the name to be displayed on the map type control. | |
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"}); | |
// Create a map object, and include the MapTypeId to add | |
// to the map type control. | |
var mapOptions = { | |
zoom: 16, | |
scrollwheel:false, | |
center: new google.maps.LatLng(0000,00000), //provide your latitude and longitude here. | |
mapTypeControlOptions: { | |
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] | |
}, | |
backgroundColor: '#F4F3F0' | |
}; | |
//generate map | |
var map = new google.maps.Map(document.getElementById('map-holder'), mapOptions); //usa a HTML div to show map with id 'map-holder' | |
//Associate the styled map with the MapTypeId and set it to display. | |
map.mapTypes.set('map_style', styledMap); | |
map.setMapTypeId('map_style'); | |
//add marker | |
var marker = new google.maps.Marker({ | |
// position: myLatlng, | |
icon:'/images/map_icon.png', | |
position: mapOptions.center, | |
map: map, | |
title:"Title" | |
}); | |
} | |
</script> | |
<script> | |
jQuery(document).ready(function(){ //initiallizing the function. | |
initialize(); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment