map doesnt display when searchfield is empty - Bugs / Questions

Robbie van den Hoven 36 posts 181 karma points

Jul 06, 2018 @ 09:45

Map doesn't display when searchfield is empty

When you drag the marker instead of using the searchfield for selecting a location in the backend, the searchfield offcourse will be empty. But when the searchfield is left empty, the map won’t show up in the frontend.

This is possibly done to check if a location is set or not, but it would be better to compare the coordinates with the Default Location.

In my case (don’t know how/why) the content editor added a lot of locations but some of them has an empty searchfield.

Copy Link

Jonathan Richards 288 posts 1742 karma points MVP

Jul 06, 2018 @ 12:53

Hi Robbie,

Sadly I've been unable to replicate

Here is a screenshot of a Google Map with an empty search field, and where I have personally dragged the map marker to hover over Southampton

Empty Search Term

And here is that same map being rendered in the front end using only the command

    @Html.Terratype((Terratype.Models.Model) Model.Content.GetProperty("map").Value)

Map showing Southampton

On a general note, it is possible to config a Terratype map to have no search field present and the Maps should still render fine.

I could try and replicate your issue, if you pasted the html code that your razor template outputs (I only need the relevant snipet that is to do with Terratype), for example for the second screenshot above it was

   <div class="Terratype">
<script src="/App_Plugins/Terratype/scripts/terratype.renderer.js?cache=1.0.19">

</script><div data-markerclusterer-url="/App_Plugins/Terratype.GoogleMapsV3/images/m" data-model="%7b%22provider%22%3a%7b%22id%22%3a%22Terratype.GoogleMapsV3%22%2c%22version%22%3a%223.28%22%2c%22apiKey%22%3a%22AIzaSyDSBmI_1-zS1mdrJaABfuGAFHTvCTCA2Eo%22%2c%22forceHttps%22%3atrue%2c%22language%22%3a%22%22%2c%22predefineStyling%22%3a%22redalert%22%2c%22showRoads%22%3atrue%2c%22showLandmarks%22%3atrue%2c%22showLabels%22%3atrue%2c%22styles%22%3a%5b%7b%22featureType%22%3a%22water%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23ffdfa6%22%7d%5d%7d%2c%7b%22featureType%22%3a%22landscape%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23b52127%22%7d%5d%7d%2c%7b%22featureType%22%3a%22poi%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23c5531b%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.highway%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%2374001b%22%7d%2c%7b%22lightness%22%3a-10%7d%5d%7d%2c%7b%22featureType%22%3a%22road.highway%22%2c%22elementType%22%3a%22geometry.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23da3c3c%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.arterial%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%2374001b%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.arterial%22%2c%22elementType%22%3a%22geometry.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23da3c3c%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.local%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23990c19%22%7d%5d%7d%2c%7b%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23ffffff%22%7d%5d%7d%2c%7b%22elementType%22%3a%22labels.text.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%2374001b%22%7d%2c%7b%22lightness%22%3a-8%7d%5d%7d%2c%7b%22featureType%22%3a%22transit%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%236a0d10%22%7d%5d%7d%2c%7b%22featureType%22%3a%22administrative%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23ffdfa6%22%7d%2c%7b%22weight%22%3a0.4%7d%5d%7d%5d%2c%22variety%22%3a%7b%22basic%22%3afalse%2c%22satellite%22%3afalse%2c%22terrain%22%3atrue%2c%22selector%22%3a%7b%22type%22%3a1%2c%22position%22%3a2%7d%7d%2c%22streetView%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22fullscreen%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22scale%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22zoomControl%22%3a%7b%22enable%22%3atrue%2c%22position%22%3a8%7d%2c%22search%22%3anull%7d%2c%22position%22%3a%7b%22id%22%3a%22WGS84%22%2c%22datum%22%3a%2250.925406%2c-1.403968%22%7d%2c%22icon%22%3a%7b%22id%22%3a%22greenmarker%22%2c%22url%22%3a%22https%3a%2f%2fmt.google.com%2fvt%2ficon%3fpsize%3d30%26font%3dfonts%2farialuni_t.ttf%26color%3dff304C13%26name%3dicons%2fspotlight%2fspotlight-waypoint-a.png%26ax%3d43%26ay%3d48%26text%3d%25E2%2580%25A2%22%2c%22size%22%3a%7b%22width%22%3a22%2c%22height%22%3a43%7d%2c%22anchor%22%3a%7b%22horizontal%22%3a%22center%22%2c%22vertical%22%3a%22bottom%22%7d%7d%2c%22zoom%22%3a7%2c%22lookup%22%3anull%2c%22label%22%3anull%2c%22height%22%3a400%7d" data-map-id="65536" data-dom-detection-type="0" data-id="TerratypeGoogleMapsV324c734b2-b661-4a55-aa63-c5b94e55ac35" data-tag="TerratypeGoogleMapsV324c734b2-b661-4a55-aa63-c5b94e55ac35" class="Terratype.GoogleMapsV3" style="display:none;">
    <script src="/App_Plugins/Terratype.GoogleMapsV3/scripts/Terratype.GoogleMapsV3.Renderer.js?cache=1.0.19" defer="">

    </script><script src="/App_Plugins/Terratype.GoogleMapsV3/scripts/markerclusterer.min.js?cache=1.0.19" defer="">

    </script><script src="https://maps.googleapis.com/maps/api/js?v=3.28&amp;libraries=places&amp;callback=TerratypeGoogleMapsV3CallbackRender&amp;key=AIzaSyDSBmI_1-zS1mdrJaABfuGAFHTvCTCA2Eo" defer="">

    </script><div id="TerratypeGoogleMapsV324c734b2-b661-4a55-aa63-c5b94e55ac35" style="height:400px;opacity:0.01;filter:alpha(opacity=1);">

    </div>

Cheers

Jonathan Richards

Copy Link

Robbie van den Hoven 36 posts 181 karma points

Jul 10, 2018 @ 09:43

Sorry for your precious time. Must have suffered from the sun.

I will just embarrass myself

@if (! String.IsNullOrEmpty (Model.Lookup))
{
     @ Html.Terratype (new Options {Zoom = 14}, Model)
}

It all works as it should. I added an extra check to verify that a location was chosen :-)

Is there another possibility to check whether the location has been deliberately chosen. so compare with the default location?

Copy Link

Jonathan Richards 288 posts 1742 karma points MVP

Jul 10, 2018 @ 11:08

Hi Robbie,

At the moment there is no way to check whether the content editor has selected a location or left it at the default location. Obviously this is something you can check with a hardcoded if statement, but that would be of the utmost hackiness and I can feel your repulsion to doing this.

I have been asked to allow null or empty map positions, so a content editor can set the map to point to nothing. This would included allowing the default location to be null too. This would be a better approach for your situation, but sadly while it is on the roadmap, its not something I can see being written by me this year.

Cheers

Jonathan

Copy Link

Robbie van den Hoven 36 posts 181 karma points

Jul 10, 2018 @ 11:40

Hi Jonathan,

Yes, I now use a hardcoded if statement.

@if (Model.Position.ToString() != "52.156111,5.387827")
{   }

I keep an eye on your work ;-)

Thanks for making a great package.

Copy Link

is working on a reply...

Flag this post as spam?

Map doesn't display when searchfield is empty