谷歌地图API 3根据用户选择绘制自定义地图图标

时间:2013-08-17 20:45:51

标签: javascript google-maps-api-3

我正在开发谷歌地图插件(总是有另一个权利的空间?)我正在绘制我的用户将插入其内容的地图的预览。我能够绘制我设置的所有内容,信息窗口中的自定义内容,设置位置(通过places.Autocomplete)等。逃避我的一件事是没有绘制自定义地图图标。

我的目标是在首次加载时绘制默认图标,然后在更改时更新

我没有在控制台中收到任何404或错误,我检查了我的事件处理程序,它们都在工作。谁能告诉我哪里误入歧途?

这是我到目前为止所做的:

//Initilize the map
google.maps.event.addDomListener(window, 'load', initialize);
function initialize(infowindow) {

    var init_center = new google.maps.LatLng(43.703793, -72.326187);
    mapOptions = {
      center: init_center,
      zoom: parseFloat(mapZoomReturn),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel : false,
    };
    var input = document.getElementById('mapAddress');
    var autocomplete = new google.maps.places.Autocomplete(input);
    var infowindow = new google.maps.InfoWindow();

    //var marker = new google.maps.Marker({
    //  position: init_center,
    //  map: map, 
    //  icon: mapMarkerImageReturn  
    //});

    // Draw the map 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            // marker needs to be set after the map
    var marker = new google.maps.Marker({
        position: init_center,
        map: map, 
        icon: mapMarkerImageReturn  
    });     

    // Set up event listeners

    // Info window DOM->MAP
    google.maps.event.addDomListener(document.getElementById('mapInfoWindow'),
        'change', function() {
        mapInfoWindowReturn = escape(jQuery('#mapInfoWindow').val());
        // get the extra content from feild, by this time the place_changed even will have fired at least once, so we have these values
        infowindowPlace = get_info_bubble(locIcon, locName, locAddress, locPhone, locWeb, mapInfoWindowReturn); // returns formatted markup for info bubble
        infowindow.setContent(infowindowPlace);
    });

    // Marker dropdown selection DOM->MAP
    google.maps.event.addDomListener(document.getElementById('mapMarker'), 'change', update_maker);
    // Custom marker text field DOM->MAP
    google.maps.event.addDomListener(document.getElementById('mapMarkerImage'), 'change', update_maker );

    function update_maker(){
        //update the marker imge - (not working)
        markerImage = get_marker_image(); // returns URL as string
        marker.setIcon(markerImage);
        marker.setPosition(locPlace.geometry.location);
        marker.setMap(map);
    }

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindowPlace = get_info_bubble(locIcon, locName, locAddress, locPhone, locWeb, mapInfoWindowReturn);
        infowindow.close();
        if (mapMarkerImageReturn !=='' || mapMarkerImageReturn !== false) marker.setVisible(false);
            input.className = '';
            locPlace = autocomplete.getPlace();
        if (!locPlace.geometry) {
        // Inform the user that the place was not found and return.
            input.className = 'notfound';
        return;
        }
        // If the place has a geometry, then present it on a map.
        if (locPlace.geometry.viewport) {
            map.fitBounds(locPlace.geometry.viewport);
            mapCurrCenter = map.getCenter();
        } else {
            map.setCenter(locPlace.geometry.location);
            map.setZoom(parseFloat(mapZoomReturn));
            mapCurrCenter = map.getCenter();
        }

        // Set the marker image (not working)
        markerImage = get_marker_image(); // returns URL as string
        marker.setIcon(markerImage);
        marker.setPosition(locPlace.geometry.location);
        marker.setMap(map);

        // get the location values for the info bubble 
        if (locPlace.address_components) {
            //console.log(locPlace.address_components);
            // Populate values for info bubble
            locName = locPlace.name;
            locIcon = locPlace.icon;
            locAddress = locPlace.formatted_address;
            locPhone    = locPlace.formatted_phone_number;
            locWeb = locPlace.website;
        }
        infowindowPlace = get_info_bubble(locIcon, locName, locAddress, locPhone, locWeb, mapInfoWindowReturn);
        infowindow.setContent(infowindowPlace);
        infowindow.open(map, marker);
    });
}

0 个答案:

没有答案