Map

About

Google map service and directive, will append script tag to the body when the directive is called and then initialise the map.

Examples

Plain HTML - expecting JSON Model data

<div id="mapHolder" class="c-map" data-map="" data-model="@model"></div>

Plain HTML - with JSON data

    
<div id="mapHolder" class="c-map" data-map="" data-model='{"apiKey":"AIzaSyDwiNtUc74Feshd9rJ7XgG2dxzf-8t-mtM","pathToStylesJson":"/assets/json/mapstyles.json","opts":{"center":{"lat":51.443801,"lng":-2.567472},"zoom":16},"markers":[{"position":{"lat":51.443286,"lng":-2.567456},"title":"Elememt78","infoWindow":{"address":{"line1":"Element78 Unit 5.9, Paintworks,","line2":"Bath Road","town":"Arnos Vale","county":"Bristol","postcode":"BS4 3EH","country":""},"link":"https://www.google.com/maps/dir//Element+78+Solutions/@51.4431184,-2.5676445,20z/data=!4m8!4m7!1m0!1m5!1m1!1s0x48718ef50e8336f7:0xc617e31c5742189a!2m2!1d-2.567437!2d51.443221","open":false}}]}'></div>

JS Params

• model:
  • apiKey: { string: required } Api Key for Google maps account.
  • pathToStylesJson { string } Path to a json file containing styles.
  • opts: { obj }
    • center: { obj: default = e78 }
      • lat: { number } Latitude.
      • long: { number } Longtitude.
    • zoom { number: default = 17 } Between 1 (world) and 20 (building).
    • style { obj } Containg css rules for the map.
  • markers { array[obj]: optional }
    • position { obj: default = opt.center } If different lat / long is needed for the marker
    • title { string } Title that will show on marker hover.
    • imgPath { string } Path to custom pin image.
    • infoWindow { obj: optional }
      • open { bool } Whether the info card should be open on load.
      • link { string } Url for link to map.
      • imgPath { string } Path to image for info card image.
      • address { obj }
        • line1 { string }
        • line2 { string }
        • town { string }
        • county { string }
        • postcode { string }
        • country { string }

{
    "apiKey": "AIzaSyDwiNtUc74Feshd9rJ7XgG2dxzf-8t-mtM",
    "pathToStylesJson": "/assets/json/mapstyles.json",
    "opts": {
        "center": {
            "lat": 51.443801,
            "lng": -2.567472
        },
        "zoom": 16
    },
    "markers": [
        {
            "position": {
                "lat": 51.443286,
                "lng": -2.567456
            },
            "title": "Elememt78",
            "infoWindow": {
                "address": {
                    "line1": "Element78 Unit 5.9, Paintworks,",
                    "line2": "Bath Road", 
                    "town": "Arnos Vale", 
                    "county": "Bristol", 
                    "postcode": "BS4 3EH",
                    "country": ""
                },
                "link": "https://www.google.com/maps/dir//Element+78+Solutions/@51.4431184,-2.5676445,20z/data=!4m8!4m7!1m0!1m5!1m1!1s0x48718ef50e8336f7:0xc617e31c5742189a!2m2!1d-2.567437!2d51.443221",
                "open": false
            }
        }
    ]
}

References / inspiration

Google Maps style generator