?
Solved

Launch Google maps from Ionic with multiple markers

Posted on 2016-08-03
4
Medium Priority
?
334 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 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Some of the SEO trends we might expect in 2017.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This Micro Tutorial will demonstrate how to use comments in Google Docs. You will learn how to create, edit, and delete a comment.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

719 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