Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Launch Google maps from Ionic with multiple markers

Posted on 2016-08-03
4
Medium Priority
?
361 Views
Last Modified: 2016-08-24
We are using the following code to launch Google Maps (which are downloaded for offline access) from Ionic application.

var location = '33.917236,-118.012009';
 window.open('comgooglemaps://?q=' + location, '_system');

Open in new window


This launches Google Maps application on ios and sets the marker at the Longitude and Latitude that has been defined (even when the user is offline).

However, our requirement is to place multiple markers on the map. I have not been able to find a way to pass multiple longitudes and latitudes to the q parameter.

Any suggestions on how this requirement can be achieved?
0
Comment
Question by:ank5
  • 3
4 Comments
 
LVL 25

Accepted Solution

by:
dgrafx earned 2000 total points (awarded by participants)
ID: 41742747
This should get you over the hump - you can add all your markers:

json = [
      {
      "mid": "123456",
      "title": "Cinemark Xd",
      "address": "6081 Center Dr #201, Los Angeles, CA 90045",
      "lat": "33.97803",
      "lng": "-118.39155"
      },
      {
      "mid": "654321",
      "title": "SCGC",
      "address": "8141 Gulana Ave, Playa Del Rey, CA 90293",
      "lat": "33.96128",
      "lng": "-118.43727"
      }
];
function initialize(json) {
      mapDiv = document.getElementById('gmap');
      mapOptions = {
            zoom: 12,
            minzoom: 5,
            mapTypeControl: true,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP            
      }
      
      map = new google.maps.Map(mapDiv, mapOptions);
      map.setCenter(new google.maps.LatLng(json[0].lat, json[0].lng));      
      
            google.maps.event.addListenerOnce(map, 'idle', function(){
                  $.each(json, function(key, data) {
                        //CALL YOUR CREATE MARKER FUNCTION HERE
                        //createMarker(map,data,key);
                  });            
            });
}
0
 
LVL 1

Author Comment

by:ank5
ID: 41744591
Thanks for sharing the example.

Will this launch the Google maps application on the device or can it only be used to display maps within the Ionic application?

We wanted to launch the Google maps application as user would not have internet access, so offline (downloaded) Google maps need to be used.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 41744623
I'm not sure - if all resources are available I see no reason why it wouldn't run offline
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 41768440
That should be it on this question so let's wrap it up
Good luck on your project
0

Featured Post

Automating Your MSP Business

The road to profitability.
Delivering superior services is key to ensuring customer satisfaction and the consequent long-term relationships that enable MSPs to lock in predictable, recurring revenue. What's the best way to deliver superior service? One word: automation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Here, we have shared an easy step by step tutorial on how to download instagram images and videos on PC, Android Mobile and iOS mobile.
Some of the SEO trends we might expect in 2017.
This Micro Tutorial demonstrates in Google Sheets how to use the HYPERLINK function to create live links inside your spreadsheet.
This Micro Tutorial will demonstrate how marketers can use the Mobile Emulation Tool in Chrome Developer Tool. This will let you preview your site on any mobile device.
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question