Google Map Street View
-
- Posts: 1
- Joined: Mon Mar 13, 2017
Hello all,
I work for a landscaping company and we thought it would be really cool to display a google street view of the selected property (list item) on one of our edit forms. The way I'm attempting to accomplish this is by using a workflow that can pull latitude and longitude values based on the given address. Now that I have these values for each list item, I'm displaying them in the form and hiding the fields with CSS. Then I want to use the google maps API to dynamically display the correct street view based on the lat/long values. When I attempt to copy and paste the code from the Google API documentation (while adding my API key and creating/assigning values to the latitude and longitude variables nothing is displayed.
I have made this code work in the past in other somewhat similar situations, I'm just having difficulty integrating it with SP Forms. I believe that the <script> tags in the html code are causing an issue. I attempted to just place the html file on my webserver and display it in an iframe, however then i'm not able to grab the field values for lat and long from the form.
I'm fairly inexperienced when it comes to javascript so if I'm overlooking something simple, I'd really appreciate some guidance. The final thing I attempted was to copy what was in the <script> tags into the SP Forms javascript editor, however, I still haven't had any luck. I believe it is something to do with the final <script> tag that just contains a URL with the API key included. I'm not sure how to properly include this in the javascript editor.
Any help or direction would be greatly appreciated. If something like this isn't possible and I need to rethink my approach, please let me know so I can stop digging further down the rabbit hole.
If you need any additional information or would like to see some code snippets, please don't hesitate to ask.
Thanks,
I work for a landscaping company and we thought it would be really cool to display a google street view of the selected property (list item) on one of our edit forms. The way I'm attempting to accomplish this is by using a workflow that can pull latitude and longitude values based on the given address. Now that I have these values for each list item, I'm displaying them in the form and hiding the fields with CSS. Then I want to use the google maps API to dynamically display the correct street view based on the lat/long values. When I attempt to copy and paste the code from the Google API documentation (while adding my API key and creating/assigning values to the latitude and longitude variables nothing is displayed.
I have made this code work in the past in other somewhat similar situations, I'm just having difficulty integrating it with SP Forms. I believe that the <script> tags in the html code are causing an issue. I attempted to just place the html file on my webserver and display it in an iframe, however then i'm not able to grab the field values for lat and long from the form.
I'm fairly inexperienced when it comes to javascript so if I'm overlooking something simple, I'd really appreciate some guidance. The final thing I attempted was to copy what was in the <script> tags into the SP Forms javascript editor, however, I still haven't had any luck. I believe it is something to do with the final <script> tag that just contains a URL with the API key included. I'm not sure how to properly include this in the javascript editor.
Any help or direction would be greatly appreciated. If something like this isn't possible and I need to rethink my approach, please let me know so I can stop digging further down the rabbit hole.
If you need any additional information or would like to see some code snippets, please don't hesitate to ask.
Thanks,
- Dmitry Kozlov
- Site Admin
- Posts: 1524
- Joined: Thu Jun 07, 2012
Hi,
You should use HTML-control. Drop it onto your form in Forms Designer and insert the following content:
<script type="text/javascript">
// your code here
</script>
If it does not help, please, open the form in your browser, expand the browser console (F12), and check errors and notifications.
You should use HTML-control. Drop it onto your form in Forms Designer and insert the following content:
<script type="text/javascript">
// your code here
</script>
If it does not help, please, open the form in your browser, expand the browser console (F12), and check errors and notifications.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 22 guests