<style>
#map {
  width: 100%;
  padding-top: 55%;
  background-color: grey;
}
</style>


<div class="hiq-content-block">
   <div class="hiq-block-item blue-background">
      <div class="hiq-block-text-container">
        <h2 id="city" data-city="$city" class="heading2-shadows-vit">$name</h2><br/>
        <p id="address" data-address="$streetAddress" class="ingress-white">Besöksadress: $streetAddress</p>
        <p id="zipcode" data-zipcode="$zipcode" class="ingress-white">$zipcode $city</p><br/>
        <a class="ingress-white" href="tel:$phone">Telefon: $phone</a><br/><br/>
        <a class="ingress-white" href="mailto:$email">E-post: $email</a>
      </div>
   </div>
   <div class="hiq-block-item">
      <div id="map"></div>
   </div>
   
</div>

<!-- Just nu används Västerås riktiga nyckel. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUzdPZlIQNoYZRX2f9bvm_Pz6V7qFSEBA&callback=googleReady">
</script>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
<script>

function googleReady(){
  getCoords(initMap);
}

function getCoords(callback){
  
  var streetAddressElement = document.getElementById('address');
  var streetAddress = streetAddressElement.getAttribute('data-address');

  var cityElement = document.getElementById('city');
  var city = cityElement.getAttribute('data-city');

  var zipcodeElement = document.getElementById('zipcode');
  var zipcode = zipcodeElement.getAttribute('data-zipcode');

  var startURL = 'https://maps.googleapis.com/maps/api/geocode/json?address=';
  var info = streetAddress + " " + zipcode + " " + city;
  var key = "&key=AIzaSyBUzdPZlIQNoYZRX2f9bvm_Pz6V7qFSEBA";
  var url = startURL+info+key;
  var $ = jQuery;
  console.log('url:', url);
$.getJSON(url, function(data){
    var lang = parseFloat(JSON.stringify(data.results[0].geometry.location.lng));
    var lati = parseFloat(JSON.stringify(data.results[0].geometry.location.lat));
  
    callback({lat: lati, lng: lang});
});
}

function initMap(kordinater) {
  
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: kordinater,
    styles: [
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#bedd9a"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#9bd0f0"
      },
      {
        "weight": 2.5
      }
    ]
  }
]
  });
  var image = '/images/18.147fa9691610a3e9f6b70/1516363101463/%282%29+karta_indikation.png';
  var marker = new google.maps.Marker({
    position: kordinater,
    map: map,
    icon: image
  });
}

</script>