Solved

Launch Google maps from Ionic with multiple markers

Posted on 2016-08-03
4
267 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Many of you may be aware of the recent Google Docs scam emails that have been floating around coming from various people that you know. Here's a guide on identifying How To Identify the Scam Email You will see an email from someone you’ve had co…
First of all let me say that the only language that I speak is English, but in answering questions here I often come across people whose English skills are not the best and I’d like to be able to communicate better with them, and the following descr…
This Micro Tutorial will demonstrate importing calendar invites from events such as webinars into your Google Calendar.
This Micro Tutorial demonstrates how to quickly find related content for YourTango's posts using MozBar Chrome extension.
Suggested Courses

623 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