Solved

Launch Google maps from Ionic with multiple markers

Posted on 2016-08-03
4
127 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 500 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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

By this time the large percentage of day-to-day transactions have shifted to mobile banking; here are some overriding areas QAs must investigate while testing mobile banking apps.  
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This Micro Tutorial will demonstrate importing calendar invites from events such as webinars into your Google Calendar.
This Micro Tutorial will demonstrate how to analyze your website's back links using a network graph powered by a fusion table.

830 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