PhoneGap Build & Google Maps

  • 2
  • Question
  • Updated 6 years ago
I am trying to create an Android app that displays specific data on a GoogleMap. Everything works well, I query a mySql database for info as the user goes through the app.

When I display the GoogleMap, I want to use custom icons for the Markers. I have done this before with no problem. However doing it through my App, I do not get an icon for the marker.

Anyone have an success with custom icons on Google Maps in a PhoneGap App?
Photo of SCGrant327

SCGrant327

  • 19 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 2
Photo of Sonu Kr

Sonu Kr

  • 4 Posts
  • 0 Reply Likes
Hello - Can you send me the sample on how to display Google maps with a movable market. I just cannot get it to work on any html pages under Xcode > PhoneGap.

SK
Photo of Steve Gill

Steve Gill, Employee

  • 43 Posts
  • 1 Reply Like
Hey Sonu,

You should take a look at the samples on https://developers.google.com/maps/do...

First test it in your browser (chrome, firefox, safari) and once you get it working in there, you should try to copy that code to your phone.

P.S. Make sure to enable access to the google maps domain in the whitelist in Xcode.

Cheers,
-Steve
Photo of DMiller

DMiller

  • 1 Post
  • 0 Reply Likes
This is an old topic, but I was having issues with custom markers as well. I can create them and run them in a browser no problem, but when loading the map into Android the markers do not display.

The issue is because of the way the files for the markers are referenced. In Javascript/HTML5 (if using an external .js file) the image locations are relative to the javascript file. In the compiled Android app, the images appear to be relative to the index file or base directory.

So in my example I just changed my image reference from my script folder:
../images/marker.png

to the base folder:
images/marker.png

and this fixed the issue.
Photo of minu george

minu george

  • 12 Posts
  • 0 Reply Likes
iwhen i tried to make an app using jquerymobile i want to add a map,... but the map is not preset inside the content... what is the prblem.. is there ay conflict??
Photo of Sviatoslav

Sviatoslav

  • 1 Post
  • 0 Reply Likes
It is indeed the relative path issue. I have solved it by replacing the path with base64 string, which is a better option for me, because it allows me to get rid of any image references in my code.

This is how it looks:

,icon: {
url: "data:image/png;base64,whateverimageyouhave"
,anchor: new google.maps.Point(13, 41)
,origin: new google.maps.Point(0,0)
,size: new google.maps.Size(26,41)
,scaledSize: new google.maps.Size(26,41)
}