Custom Map Markers With Buttons!

Hardware (GPS, accelerometer, etc.)
#1

Hi everyone,

I’ve seen a lot of posts on the forums recently asking about custom map markers and buttons on the pop up box. Therefore i thought id share this little test project that will allow you to use custom markers, buttons and have it all returned back to Corona. It’s essentially just a HTML page with some javascript thats loaded in a webView or webPopup. Credit goes to jasonschroeder who posted the HTML creation in the code exchange, i simply expanded upon that and made it more customizable and (hopefully) easier to use.

It has its fair share of issues (only on the Android side), but if you guys use it and improve upon it then we should get a pretty decent project in the end! 

So far you can:

    - Add custom images for markers

    - Edit the popup box (Not easy currently, you’ll need to know css etc)

    - A popup button that will close the map and return the markers index to corona

    - Change the zoom level

    - Allow the map to be draggable or not

    - Allow zooming or not

    - Change the map type (satellite, hybrid etc)

    - Allow styling (blue map, red roads etc, advanced)

    - Change the maps language (only really has an effect with “ja” for japanese)

    - Enable bouncing pins, but its pretty buggy currently!

Heres the project:

And below are a few images to demonstrate the code:

Its not the fatest thing in the world, but its probably the best you can do without going to Enterprise (which is alot better and faster on iOS!).

I hope this helps someone! 

Best Regards,

Jamie Trinder

#2

This is wonderful. Thanks for sharing. I have few ideas which I had to shelf until Corona SDK allowed me to do what you just did so perhaps I can pursue them now. Appreciate your contribution.

#3

Thanks and no problem. It could do with some improving, but my HTML and javascript skills are extremely limited :slight_smile:

#4

Hi all,

Just a quick update to post the newer version of this code. Theres a few changes but the most important ones are:

  • Now adds a non-clickable marker to display the users current location (only updates once you re-open the map)
  • The map center is now also based off the users location
  • iOS styled info boxes
  • Each marker can now have different custom images (URL based)
  • The shadow image has been removed and now you just build it into your custom marker (just makes life easier!)

Heres a couple of images demonstrating the new style info boxes and the user location pin!

And heres the downloadable project:

A slight improvement on the previous version and i think the info boxes look a lot better now. Hopefully i’ll figure out how to have the users location dynamically update soon, but i’m not holding my breath. Let me know if you think theres anything else needed for it :slight_smile:

Best Regards,

Jamie Trinder

#5

This is wonderful. Thanks for sharing. I have few ideas which I had to shelf until Corona SDK allowed me to do what you just did so perhaps I can pursue them now. Appreciate your contribution.

#6

Thanks and no problem. It could do with some improving, but my HTML and javascript skills are extremely limited :slight_smile:

#7

Hi all,

Just a quick update to post the newer version of this code. Theres a few changes but the most important ones are:

  • Now adds a non-clickable marker to display the users current location (only updates once you re-open the map)
  • The map center is now also based off the users location
  • iOS styled info boxes
  • Each marker can now have different custom images (URL based)
  • The shadow image has been removed and now you just build it into your custom marker (just makes life easier!)

Heres a couple of images demonstrating the new style info boxes and the user location pin!

And heres the downloadable project:

A slight improvement on the previous version and i think the info boxes look a lot better now. Hopefully i’ll figure out how to have the users location dynamically update soon, but i’m not holding my breath. Let me know if you think theres anything else needed for it :slight_smile:

Best Regards,

Jamie Trinder

#8

Daily # 1214 seems to introduce a new capability into this arena.

#9

Yes i saw that and got pretty excited!

But as far as i can tell without actually trying the code, it will only give you some information about the marker in a listener function. That doesn’t actually help showing a button on the marker, or custom markers, but at least it gives us the ability to add extra buttons outside of the mapView when a pin is touched!

I’ll test it out soon to see how it goes!

#10

Hi Tang

is it possible to click some button (not in that map), and the button related to the marker .

so it trigger a event then show title and subtitle on the map?

#11

The new map markers support a Title and Subtitle field that shows in a little speech bubble above each pin point.  You can now also include custom images for those markers if you like.  When a pin is tapped, an event is fired that has some information about that pin.  You could during that event update another display with information about the pin that was tapped.

#12

@ Rob Miracle

i get a list of places from google place API

than i make a tableview list with these data

And generate several marks into MAP.

I wonder can i touch anyone on the list row then it goes to the marker directly instead of touching on the map.

Thanks

#13

If you have the lat, long numbers you can center the map on that point and if the marker is there it will be centered.  But you won’t get the speech bubble with the title and subtitle without tapping on the marker.

#14

@Rob Miracle

thanks, is there any way to show speech bubble without tapping?

there are so many markers on the map, so it’s so difficult to tap on them if there is no bubble show up automatically.

anyway, any suggestion?

#15

Not that I’m aware of.  This could be a good feature.  Please suggest it at http://feedback.coronalabs.com

#16

Daily # 1214 seems to introduce a new capability into this arena.

#17

Yes i saw that and got pretty excited!

But as far as i can tell without actually trying the code, it will only give you some information about the marker in a listener function. That doesn’t actually help showing a button on the marker, or custom markers, but at least it gives us the ability to add extra buttons outside of the mapView when a pin is touched!

I’ll test it out soon to see how it goes!

#18

Hi Tang

is it possible to click some button (not in that map), and the button related to the marker .

so it trigger a event then show title and subtitle on the map?

#19

The new map markers support a Title and Subtitle field that shows in a little speech bubble above each pin point.  You can now also include custom images for those markers if you like.  When a pin is tapped, an event is fired that has some information about that pin.  You could during that event update another display with information about the pin that was tapped.

#20

@ Rob Miracle

i get a list of places from google place API

than i make a tableview list with these data

And generate several marks into MAP.

I wonder can i touch anyone on the list row then it goes to the marker directly instead of touching on the map.

Thanks