@razaman2/vue-map

vue-map

Project setup

npm install --save @razaman2/google-map

Examples are provided for template and render functions.

Add map

h(GoogleMap, {
    apiKey: 'your google api key',
    options: {
        ...
    }
});

<GoogleMap api-key="your google api key" :options="{...}"/>

Add map with info window(s)

h(GoogleMap, {
    apiKey: 'your google api key',
    options: {
        ...
    }
}, () => [
    
    h(GoogleInfo, () => 'My info-window 1'),
    
    h(GoogleInfo, () => 'My info-window 2')

]);

<GoogleMap api-key="your google api key" :options="{...}">
    <GoogleInfo :options="{...}">My info-window 1</GoogleInfo>
    <GoogleInfo :options="{...}">My info-window 2</GoogleInfo>
</GoogleMap>

Add map with marker(s)

h(GoogleMap, {
    apiKey: 'your google api key',
    options: {
        ...
    }
}, () => [
    
    h(GoogleMarker, {
        options: {
            ...
        }
    }),
    
    h(GoogleMarker, {
        options: {
            ...
        }
    })

]);

<GoogleMap api-key="your google api key" :options="{...}">
    <GoogleMarker :options="{...}"/>
    <GoogleMarker :options="{...}"/>
</GoogleMap>

Add info window to marker

h(GoogleMarker, {
    options: {
        ...
    }
}, () => [
    h(GoogleInfo, {
        options: {
            ...
        }
    }, () => 'Info window on marker')
])

<GoogleMarker :options="{...}">
    <GoogleInfo :options="{...}">Info window on marker</GoogleInfo>
</GoogleMarker>

Documentation

See Google Maps JavaScript API Reference for assistance.