Cacher is the code snippet organizer for pro developers

<div id="map_canvas"></div>
<?php

// Those are variables who get the address, marker image, eventually if position type
// is set then get lat long instead of geocode
$map = array(
  'address' => get_field('address'),
  'marker' => get_field('marker'),
  'position_type' => get_field('position_type'),
  'marker_latlng' => get_field('marker_latlng'),
  'marker_address' => get_field('marker_address'),
);

if ($map['position_type'] == '1')
{
  // get by lat long
  $latLng = $map['marker_latlng'];
} else {
  // get by address
  $geoAddress = $map['marker_address'];
}
$markerSrc = $map['marker']['sizes']['large'];

?>
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?&sensor=false">
</script>
<script type="text/javascript">
  function initialize_map() {
    var geoCoder = new google.maps.Geocoder();
    var markerOptions;
    var marker_image = '<?php echo $markerSrc ?>';
    var mapOptions = {
      center: new google.maps.LatLng(50.074415, 19.942606),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
    };

    var styles = [
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "elementType": "geometry.fill"  },{
    "elementType": "geometry.fill"  },{
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      { "visibility": "on" },
      { "color": "#ffffff" }
    ]
  },{
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#cbd8de" }
    ]
  },{
    "elementType": "labels.text.stroke",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit.station",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#dfe6eb" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "labels.text",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape.natural"  }
];

       var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
       map.setOptions({styles: styles});

    var address = "<?php echo $map['marker_address'] ?>";
    if (address != undefined && address != false && address != '') {
      geoCoder.geocode({
        'address' : address
      },
      function(results, status){
        if (status == google.maps.GeocoderStatus.OK){
          markerOptions = {
            position: results[0].geometry.location,
            map: map,
            icon: marker_image
          }
        } else {
          console.log(status);
          console.log(results);
        }
      }
      );
    } else {
      markerOptions = {
        position: new google.maps.LatLng(<?php echo $latLng ?>),
        map: map,
        icon: marker_image
      }
    }
    var marker = new google.maps.Marker(markerOptions);
  }

$(window).load(function () {
  initialize_map();
});
</script>