Easy set google map.
Please remember to update the “???????” to your information.
|
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 |
<div id="gmap"></div> <script> function initMap(){ var customMapType = new google.maps.StyledMapType([ { stylers: [ {color: '#e5e5e5'} ] }, { featureType: 'all', elementType: 'labels.text.fill', stylers: [{color: '#000000'}] }, { featureType: 'landscape', elementType: 'all', stylers: [{color: '#eceae4'}] }, { featureType: 'road', elementType: 'all', stylers: [{color: '#f7f7f7'}] }, { featureType: 'water', elementType: 'all', stylers: [ {color: '#46bcec'} ] } ], { name: 'Website Name' }); var customMapTypeId = 'custom_style'; var map = new google.maps.Map(document.getElementById('gmap'), { zoom: 16, center: {lat: ?????????, lng: ?????????}, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId] } }); map.mapTypes.set(customMapTypeId, customMapType); map.setMapTypeId(customMapTypeId); var addr = "?????????????????????????????????????????????"; var infowindow = new google.maps.InfoWindow({ content: addr }); var image = 'img_url?????????'; var marker = new google.maps.Marker({ position: {lat: ?????????, lng: ?????????}, map: map, draggable: false, animation: google.maps.Animation.DROP, icon: image }); }; </script> <script src="https://maps.googleapis.com/maps/api/js?v=3&key=?????????????????????????????????????????????&language=en&callback=initMap" async defer ></script> |