Creating customly selected locations, in Jquery Mobile, with Google Map using existing locations? -
disclaimer! may making harder is...
i attempting create custom google maps webpage mobile. google maps page include current location of user, , existing restaurants within there location. know google maps provides default. include picked establishments.
mission: starting website display dog friendly restaurants , patio dining. goal provide user list of closest eater's within there location user bring there dog to. ideally include same info normal restaurant display on google maps ( phone number, description, ratings, hours.) except displaying custom icon, , not displaying none dog friendly restaurants.
solutions have tried,
creating custom map using google maps api. ( have ability create custom markers, titles, , description. unable use existing google maps data. because don't know how, haven't found on using existing data)
creating shared map ( havent dived totally, creating starred items seems work, unsure how present data on webpage instead on own google maps...)
recreating locations scratch google maps api ( totally pain this, , recreating of data need. using first solution.)
has worked on similar this? eager research further, don't want go down wrong rabbit hole if there better solutions. first experience custom google maps...
forgive noob-like questions well, junior come...
for #2, can create custom map "starred" dog-friendly restaurants , use map id let other people see it. this map:
for #1 , #3, use google places api: https://developers.google.com/maps/documentation/javascript/examples/place-radar-search
here example using data google places, searching "dog restaurant".
<!doctype html> <html> <head> <meta charset="utf-8"> <title>search 200 places radar search</title> <link href="http://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,visualization&v=3.exp"></script> <script> var map; var infowindow; var service; function initialize() { map = new google.maps.map(document.getelementbyid('map-canvas'), { maptypeid: google.maps.maptypeid.roadmap, center: new google.maps.latlng(-33.8668283734, 151.2064891821), zoom: 15, styles: [ { stylers: [ { visibility: 'simplified' } ] }, { elementtype: 'labels', stylers: [ { visibility: 'off' } ] } ] }); infowindow = new google.maps.infowindow(); service = new google.maps.places.placesservice(map); google.maps.event.addlisteneronce(map, 'bounds_changed', performsearch); document.forms.kwform.onsubmit = performsearch; } function performsearch() { var request = { bounds: map.getbounds(), keyword: document.forms.kwform.keywords.value // 'dog restaurant' }; service.radarsearch(request, callback); return false; } function callback(results, status) { if (status != google.maps.places.placesservicestatus.ok) { alert(status); return; } (var = 0, result; result = results[i]; i++) { createmarker(result); } } function createmarker(place) { var marker = new google.maps.marker({ map: map, position: place.geometry.location, icon: { // star path: 'm 0,-24 6,-7 24,-7 10,4 15,21 0,11 -15,21 -10,4 -24,-7 -6,-7 z', fillcolor: '#ffff00', fillopacity: 1, scale: 1/4, strokecolor: '#bd8d2c', strokeweight: 1 } }); google.maps.event.addlistener(marker, 'click', function() { service.getdetails(place, function(result, status) { if (status != google.maps.places.placesservicestatus.ok) { alert(status); return; } infowindow.setcontent(result.name); infowindow.open(map, marker); }); }); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas" style="width:80%; height:90%; "></div> <form id="kwform"> <input type=text value="dog restaurant" name="keywords" id="keywords" /> <input type=submit /> </form> </body> </html> now need track position using geo-location:
navigator.geolocation.watchposition and add jquery mobile code , have working app.
also possible use google fusion tables embedded in map if want import of dog-friendly locations own database.
Comments
Post a Comment