Possibility to open map with sdress

[rorentz]

Is it possible to set a destination adress instead of latitude and longitude? That would be awesome.

[brh55]

Ah yes that should be do-able! if there is enough interest I would consider implementing this, or someone can PR this. We just need to construct links with correct query parameters, and do a little testing. I would tackle this, but currently in a heavily involved project until the beginning of May.

Thumbs up if you are interested

[b-asaf]

@robsonrobi, @brh55: My code to open google maps or apple maps with a string address is (I did some change in @brh55 code):

const createMapLink = (addressStr, mapProvider) => {
    if (mapProvider === 'apple') {
        return `http://maps.apple.com/?q=${addressStr}`;
    }
    return `https://www.google.com/maps/search/?api=1&query=${addressStr}`;
};

const openNavigationApp = (addressStr) => {
    const mapProvider = (Platform.OS === 'ios') ? 'apple' : 'google';
    const mapLink = createMapLink(data, mapProvider);

    Linking.openURL(mapLink)
        .catch(err => console.error('An error occurred', err));
};

An example for a address string: FL, Miami, 3565 NW 245th Street Rd

There might be a need to add here or outside a validate method for the address - for me its not relevant because I currently control the addressStr hope it helps

[brh55]

Since the pin option has been implemented, this can be achieved by removing the ll param in apple maps and google maps (I assume here for GMaps).

[TimurAsayonok]

@brh55 Any news?

[brh55]

@TimurAsayonok with v0.2.0 you should be able to use the query property to specify the address, I know this will work properly on Google Maps, but for Apple Maps it may need to be tested.

[TimurAsayonok]

@brh55 thanks for reply, will check how it's works

[Beissner]

@brh55 the query property isn't working on Apple Maps. Has anyone found a solution?

[TimurAsayonok]

@Beissner I found problem for IOS. @brh55 in method open() in index.js we don't have query. We have just open({ latitude, longitude, zoomLevel, name, provider}). If you want to use open() with query this method should be like - open({ latitude, longitude, zoomLevel, name, provider, query}).

Another, in method open() in the input parameters we have prop name but we don't use this prop into createOpenLink() a and createMapLink().

And I have problem with google maps on Android, Every time I incorrect address on the map (ocean =) ).

I have changed createMapLink() method. Was:

export function createMapLink({latitude, longitude, zoomLevel = 15, query, provider = 'google'}) {
    const link = {
    'google': `https://www.google.com/maps/search/?api=1&zoom=${zoomLevel}`,
    'apple': `http://maps.apple.com/?ll=${latitude},${longitude}&z=${zoomLevel}`,
    };

    if (query) {
    const queryParam = `q=${query}`;
    link.google = link.google.concat('&', queryParam);
    link.apple = link.apple.concat('&', queryParam);
    } else {
    link.google = link.google.concat('&', `q=${latitude},${longitude}`)
    }

   return encodeURI(link[provider]);
}

Has become:

export function createMapLink({latitude, longitude, zoomLevel = 15, query, provider = 'google'}) {
    const link = {
        'google': `http://maps.google.com/maps?ll=${latitude},${longitude}&z=${zoomLevel}`,
        'apple': `http://maps.apple.com/?z=${zoomLevel}`,
    };

    if (query) {
        const queryParam = `q=${query}`;
    link.google = link.google.concat('&', queryParam);
    link.apple = link.apple.concat('&', queryParam);
    } else {
        link.apple = link.apple.concat('&', `ll = ${latitude}, ${longitude}`);
   }

    return encodeURI(link[provider]);
}

and now I can use open({ query: address }) or open({ latitude: lat, longitude: lng, query: address }) If I use open({ latitude: lat, longitude: lng}) will be correct address but without marker on Android and correct address with marker on IOS

@brh55 let me know what do you think.

[brh55]

@TimurAsayonok You're right, I rushed and missed the update to open(), let's submit a PR to replace the name parameter with query. This should fix issue with Apple Maps and Google Maps if you are using the Open functionality.

We should be using https://www.google.com/maps/search/?api=1 as it's a cross-platform url.

The issue is it only accepts the q parameter, but it accepts lat and long, address, or a place name. So it doesn't support both a ll and q, but this is by design, and a marker should still be present regardless of input.

I would suggest external validation would be more appropriate if you are inserting a wrong query? Technically "Ocean" would work, it's just Google Maps will search for the best match.

[brh55]

If anyone is up to fixing this, I'll take a PR to just fix the open() function. Simple fix, just need to simply remove name and use query instead.

[TimurAsayonok]

@brh55 today i will crate PR

Updated: new PR - done.

[tspiva]

There seems to be an issue with google maps displaying the pin. According to the docs linked above, the parameter should be called "query" instead of "q" unless I'm missing something.

I changed the createMapLink to this to get the pin working on google maps (and easily get directions):

    if (query) {
        link.google = link.google.concat(`&query=${query}`);
        link.apple = link.apple.concat(`&q=${query}`);
    } else {
        link.google = link.google.concat(`&query=${latitude},${longitude}`)
    }

Note: I'm not sure about apple as I'm just working in android at the moment.

Is this the desired behavior?

[brh55]

@tspiva Ops, you're right, apple maps should be remain as q and google maps should be query this will allow pin + address. Can you please send a PR for fix?

[tspiva]

PR done