Geolocation with Google maps API and Google text Search

Question

I am new to javascript converting from VB. This is my first shot at creating a dynamic google map and am ultimatly trying to generate a google map using the users location and apply a places search for sports stores. Currently my map generates and zooms to my location but does not apply the search results with markers. here is my code:

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <article> <p>Finding your location: <span id="status">checking...</span></p> </article> <script> function success(position) { var s = document.querySelector('#status'); if (s.className == 'success') { // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back return; } s.innerHTML = "found you!"; s.className = 'success'; var mapcanvas = document.createElement('div'); mapcanvas.id = 'mapcanvas'; mapcanvas.style.height = '400px'; mapcanvas.style.width = '560px'; document.querySelector('article').appendChild(mapcanvas); var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var myOptions = { zoom: 10, center: latlng, mapTypeControl: false, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); var service; var infowindow; var request = { location: latlng, radius: '3200', query: 'sports' }; service = new google.maps.places.PlacesService(map); service.textSearch(request, callback); function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; createMarker(results[i]); } } } } function error(msg) { var s = document.querySelector('#status'); s.innerHTML = typeof msg == 'string' ? msg : "failed"; s.className = 'fail'; // console.log(arguments); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { error('not supported'); } </script> 

I feel like I might be missing some var assignments or not over writing the current map from "map canvas". Has any one created something similar that provide some insight? Any help is greatly appreciated to find why my search results will not display on the map. Thanks!

Answer 1

Your code works but you are missing the createMarker function. This is not an API method.

Uncaught ReferenceError: createMarker is not defined

An example createMarker function:

function createMarker(place) {

    new google.maps.Marker({
        position: place.geometry.location,
        map: map
    });
}

Note : if you only need the location in that function you could also call it and modify it this way:

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            var place = results[i];
            console.log(place);
            createMarker(results[i].geometry.location); // pass only the location to createMarker
        }
    }
}

function createMarker(position) {

    new google.maps.Marker({
        position: position,
        map: map
    });
}

JSFiddle demo