Forum | Appery.io

This is what we're trying to accomplish:

The first marker is put on the map when the page loads. This marker is the geolocation of the user using the app & should always be on the map.

Next we have 3 categories of locations invoked by button click. When the user clicks on a category button, we want it to load those locations onto the map (with info windows) . We want custom marker icons for each of the 3 categories & the geolocation icon.

The question is how to take locations from a local storage variable & invoke them on button click to display on a map with custom icons. Also how to change the geolocation marker to a custom icon, as well.

Please tell me what to do. If anyone can give me an answer within the next hour that I can test & prove it works I'm happy to pay $25 via Paypal. Please help me solve the problem.

Use Geolocation service to get user's current location.

Map the service to Google Map component:

Invoke the Geolocation service on page load event. Then, on Geolocation service 'success' event, run this JavaScript:

code
var map = Tiggzi ('googlemap1');
map.options['address']='';
map.refresh();
/code

Here is code to add three markers, one of them has a custom marker (icon). This can be done on button click:

code
var myOptions = {
zoom :8,
center: new google.maps.LatLng(37.63, -122.424),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map($('div[dsid="googlemap1"]').get(0), myOptions);

//San Francisco, with custom marker
var sfLatlng = new google.maps.LatLng(37.775, -122.4183333);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "San Francisco",
icon: "http://i.imgur.com/QtWkT.png"
});

//San Jose
var sjLatlng = new google.maps.LatLng(37.3394444, -121.8938889);
var marker = new google.maps.Marker({
position: sjLatlng,
map: map,
title: "San Jose"
});

//San Mateo
var smLatlng = new google.maps.LatLng(37.5630556, -122.3244444);
var marker = new google.maps.Marker({
position: smLatlng,
map: map,
title: "San Meteo"
});
/code

Here is an example: http://project.tiggzi.com/view/857f91...

Thanks for the help, Tiggzi is awesome! This almost does what we want, but we have over a thousand locations in all we want to add to the map, so we wanted to map them using the database instead of one at a time.

Is it possible to add our latitude & longitude data into a local storage variable & run the array through a loop onto the map? Is there an example of doing it this way?

Also in your example when you click a button to add new markers, the original geolocation marker disappears. Is there a way to keep it on the screen with the new markers?

Yes, you can save locations into local storage. Saving is just using the browser API:

localStorage.setItem('name', value);

and getting from local storage:

localStorage.getItem('name');

Just add the current location as a marker on button click.

Cool, is there a way to prevent the geolocation from disappearing when pressing the other buttons?

Check Google Maps API, but I think you just need to add it to the map as marker when you get other locations.

EXCELLENT - I've been looking for a complete working example - this is it - thanks!

I'm trying to create an app using Google maps which will do have three buttons:

1. To show any location the user searches for (as in tutorial).

2. To show their current Geolocation (as in tutorial).

3. To show specific predetermined locations (using code given above).

   This is here:
   http://project.tiggzi.com/mobile-fram...

   All the buttons work as expected.

   However, I'm missing something here, because after the third button is used, none of the other maps will appear - it 'hangs' on the predetermined map.

   Can you tell me what I'm doing wrong?

I'm getting a JS error when I click the second button:

I've just clicked my own link above and the second button (Show my current location) works for me in both Firefox and Internet Explorer. I don't know why it's not working for you.

Any help appreciated.