Problem with using Autocomplete and Map on same page

[sschueller]

Is there a way to have both a map with markers etc as well as an autocomplete places form on the same page? I can get either one to work but not together.

I get "Uncaught TypeError: undefined is not a function" which is probably due to a collision. I see the '<script type="text/javascript" src="//www.google.com/jsapi?callback=load_ivory_google_map_api"></script>' is in there twice and a function "function load_ivory_google_map_api ()" is declared twice with different content.

I am using the following on the page:

{{ $autocompleteHelper->renderJavascripts($autocomplete) }}
{{ $mapHelper->renderJavascripts($map) }}

{{}} are Laravel's blade echo statements.

I am using this in a Laravel project via composer ("egeloen/google-map": "1.4.*@dev")

[egeloen]

Do you use both as async?

[sschueller]

yes

        $autocomplete = new Autocomplete();

        $autocomplete->setPrefixJavascriptVariable('place_autocomplete_');
        $autocomplete->setInputId('search_location');
        $autocomplete->setInputAttribute('class', 'form-control input-lg');
        $autocomplete->setInputAttribute('placeholder', Lang::get('listings.location'));
        $autocomplete->setInputAttribute('name', 'search_location');
        $autocomplete->setTypes(array(AutocompleteType::CITIES));
        $autocomplete->setAsync(true);
        $autocomplete->setLanguage(App::getLocale());


        $map = new Map();
        $map->setPrefixJavascriptVariable('map_');
        $map->setHtmlContainerId('map_canvas');

        $map->setAsync(true);
        $map->setAutoZoom(false);

        $map->setCenter($latitude, $longitude, true);
        $map->setMapOption('zoom', 11);

        $map->setMapOption('mapTypeId', MapTypeId::ROADMAP);

        $map->setMapOption('disableDefaultUI', true);
        $map->setMapOption('disableDoubleClickZoom', true);
        $map->setMapOptions(array(
            'disableDefaultUI'       => true,
            'disableDoubleClickZoom' => true,
        ));

        $map->setStylesheetOptions(array(
            'width'  => '800px',
            'height' => '400px',
        ));

        $map->setLanguage(App::getLocale());

            $marker = new Marker();

            $marker->setPrefixJavascriptVariable('marker_');
            $marker->setPosition($listing->lat, $listing->lon, true);
            $marker->setAnimation(Animation::DROP);

            $marker->setIcon(asset('img/pin.png'));

            $marker->setOptions(array(
                'clickable' => true,
                'flat'      => true,
            ));

            // info window for marker
            $infoWindow = new InfoWindow();

            $infoWindow->setPrefixJavascriptVariable('info_window_');
            $infoWindow->setPosition(0, 0, true);
            $infoWindow->setPixelOffset(1.1, 2.1, 'px', 'pt');
            $infoWindow->setContent(View::make('listing.mappinpopup', array('listing' => $listing))->render());
            $infoWindow->setOpen(false);
            $infoWindow->setAutoOpen(true);
            $infoWindow->setOpenEvent(MouseEvent::CLICK);
            $infoWindow->setAutoClose(true);
            $infoWindow->setOptions(array(
                'disableAutoPan' => true,
                'zIndex'         => 10,
            ));

            $marker->setInfoWindow($infoWindow);

            $map->addMarker($marker);

[egeloen]

Unfortunately, this is a known limitation which will be fixed in the next major release... I have explained a workaround (pretty complicated) in egeloen/IvoryGoogleMapBundle#96

[soerenmartius]

Hey egeloen, do you have an timing for the next major release?

[egeloen]

@caramba1337 Basically, I have created egeloen/ivory-http-adapter in order to replace widop/http-adapter for the google map library in the middle of my refacto. This is mainly why it takes some more time to refactor. Anyway, It is well advanced but not fully finished (I have one part to refactor/finish and obviously, I have to rewrite the doc). It should not take me a long time to finish, so I hope in the next weeks, it will be available in a dedicated branch, then you can try it and give me some feedbacks :)

Btw, this issue is already fixed in my refacto (You will be able to use as many maps/autocompletes you want in a single page)

[soerenmartius]

@egeloen Thank you for the information.

[egeloen]

Your issue has been fixed by #134 but will only be part of the 2.x version.