HTML markup
|
1 |
<div data-address="Tattersalls Ln, Melbourne" class="ct-googleMap ct-js-googleMap ct-u-backgroundLightBlack"></div> |
JavaScrip
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<script id="googleMap" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script> and inside main.js // Google map // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var mapSelector = $(".ct-js-googleMap"); if(mapSelector.length) { var marker_address = mapSelector.attr("data-address"); var map, bounds, marker, mapStyle, marker_icon; mapStyle = [{ "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{"color": "#444444"}] }, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, { "featureType": "poi", "elementType": "all", "stylers": [{"visibility": "off"}] }, { "featureType": "road", "elementType": "all", "stylers": [{"saturation": -100}, {"lightness": 45}] }, { "featureType": "road.highway", "elementType": "all", "stylers": [{"visibility": "simplified"}] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{"visibility": "off"}] }, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "off"}]}, { "featureType": "water", "elementType": "all", "stylers": [{"color": "#425a68"}, {"visibility": "on"}] }] map = new google.maps.Map(mapSelector[0], { center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP, //MapTypeId.ROADMAP, MapTypeId.SATELLITE, MapTypeId.HYBRID, MapTypeId.TERRAIN styles: mapStyle, scrollwheel: false, draggable: true, zoom: 16 }); bounds = new google.maps.LatLngBounds(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({'address': marker_address}, function (results, status) { if (status === google.maps.GeocoderStatus.OK) { var image = 'assets/images/marker_icon.png'; marker = new google.maps.Marker({ position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()), map: map, icon: image }); bounds.extend(marker.position); map.setCenter(results[0].geometry.location); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } |
Map