Hello guys i am creating a form that works really well but when i want to set the localisation of the place but now i have to set it manually (with latitude and logitude), so i create a map with dragable marker and when i drag the marker the value lat and lng changes (in the console) but now i want to set it in the form (because the values are changing but not save) and i would like to change vlaues of latitude and longitude when i change the position of mark (so i want to set latitude with the value lat and longitude with the value lng)
My form html (in twig with symfony) :
{% extends 'base.html.twig' %}
{% block body %}
<!-- Left and right buttons -->
<div class="col-8 mx-auto">
<br/><br/><br/><br/>
<div class="card">
<div class="card-header header-elements-inline">
<h6 class="card-title">Create a place</h6>
</div>
<br/>
<div class="card-body">
{{ form_start(form) }}
<div class="form-group">
<label for="form_username">Content :</label>
{{ form_widget(form.content) }}
</div>
<div class="form-group">
<label for="form_username">Title:</label>
{{ form_widget(form.title) }}
</div>
<div class="form-group">
<label for="form_username">Theme:</label>
{{ form_widget(form.theme) }}
</div>
<div class="form-group">
<label for="form_username">Max users:</label>
{{ form_widget(form.maxUser) }}
</div>
<div class="form-group">
<label for="form_username">timeLenght:</label>
{{ form_widget(form.timeLength) }}
</div>
<div class="form-group">
<label for="form_username">Longitude:</label>
{{ form_widget(form.longitude) }}
</div>
<div class="form-group">
<label for="form_username">Latitude:</label>
{{ form_widget(form.latitude) }}
</div>
<div class="card px-3">
<br/>
<!-- Basic map -->
<div class="map-container" id="map_marker_simple"></div>
{% block javascripts_map %}
{% endblock %}
<br/>
<!-- /basic map -->
</div>
<!-- /custom handle -->
</div>
<div class="d-flex justify-content-end align-items-center">
<button type="submit" class="btn bg-blue" id="create">Submit<i class="icon-paperplane ml-2"></i></button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
<!-- /left and right buttons -->
{% endblock %}
and my part js of the form :
{% extends 'admin/user/new_place.html.twig' %}
{% block javascripts_map %}
<script type="text/javascript">
/* -------------------------------------------------------------------
-----------
*
* # Basic markers
*
* Specific JS code additions for maps_google_markers.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var GoogleMapMarkerBasic = function() {
//
// Setup module components
//
// Line chart
var _googleMapMarkerBasic = function() {
if (typeof google == 'undefined') {
console.warn('Warning - Google Maps library is not
loaded.');
return;
}
// Setup map
function initialize() {
// Define map element
var map_marker_simple_element =
document.getElementById('map_marker_simple');
// Set coordinates
var myLatlng = new google.maps.LatLng(('{{ place.latitude
}}'), ('{{ place.longitude }}'));
// Options
var mapOptions = {
zoom: 10,
center: myLatlng
};
// Apply options
var map = new google.maps.Map(map_marker_simple_element, mapOptions);
var contentString = 'Marker';
// Add info window
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Add marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
title: ('{{ place.title }}'),
animation: google.maps.Animation.DROP
});
marker.addListener('drag', function() {
infowindow.open(map,marker);
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
console.log(lat, lng)
});
// Attach click event
};
// Initialize map on window load
google.maps.event.addDomListener(window, 'load', initialize);
};
return {
init: function() {
_googleMapMarkerBasic();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
GoogleMapMarkerBasic.init();
});
</script>
{% endblock %}
This is the view of the form :
Thx for all that will try to answer :)
All you have to do is to change the latitude and longitude input value through javascript.
Vanilla javascript:
document.getElementById("your_latitude_field").value = marker.getPosition().lat();
document.getElementById("your_longitude_field").value = marker.getPosition().lng();
JQuery:
$("#your_latitude_field").val(marker.getPosition().lat());
$("#your_longitude_field").val(marker.getPosition().lng());
Related
I am trying to manage Google Maps Api in order to work within Flask.
However it doesn't give any error, but it doesn't render the map itself.
It work perfectly on simple .html however Flask is having problem rendering map.js file itself
map.js
// Initiation of marker for Google Maps Api
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: {
lat: 52.857500,
lng: -8.987437
}
});
var labels = "ABCDEFGHIJKLMONPQRSTUVWXYZ";
var locations = [{
lat: 52.857500,
lng: -8.987437
}];
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
Flask Code
{% extends 'base.html' %}
{% block content %}
<!-- content -->
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<div class="row center"></div>
<h2 class="header center black-text">How to approach our office ? </h2>
<div class="row center">
<h5 class="header col s12 light">85 Aughanteeroe<br> Gort Road <br> Ennis <br> Co. Clare<br>V95 CXV2<br>Ireland</h5>
</div>
<div class="row center" id="map">
<br>
</div>
</div>
</div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCef1gneSCdkePrWnkXROPQUynW490rnd4&callback=initMap"></script>
<script src="{{url_for('static', filename='js/map.js')}}"></script>
Im working on an interactive gantt chart with django and jquery.
I build the table like this:
<div class="gantt">
<div class="gantt-labels">
{% for item in items2 %}
<tr>
<div class="gantt-labels" id="labels"> </div>
</tr>
{% endfor %}
</div>
<div class="gantt_timeline">
<div class="table gantt_table" id="myTable">
<thead>
<div class="gantt-tr time-bar">
{% for item in items2 %}
<div class="gantt-td chart-values">{{ item.y|date:"D" }}</div>
{% endfor %}
</div>
</thead>
<tbody>
{% include "datamodel3.html" %}
{% for item in items2 %}
<div class="tr gantt-tr rows" id="row{{ forloop.counter }}" >
{% for item in items2 %}
<div class="td gantt-td"> </div>
{% endfor %}
</div>
{% endfor %}
</tbody>
</div>
</div>
</div>
The queryset "items2" holds the data for the table (amount of rows and cells in dates)
Example:
row1 01/01/2012
row2 02/01/2012
...
row31 31/01/2012
datamodel3.html
Here are the bars:
{% for item in items3 %}
<div class='bar resizable bars' style="pointer-events:visible;" id="bar{{ forloop.counter }}" data-duration="{{ item.start|date:'D' }}-{{ item.end|date:'D' }}">
<div class='resizers'>
<div class='resizer top-left'></div>
<div class='resizer top-right'></div>
<div class='resizer bottom-left'></div>
<div class='resizer bottom-right'></div>
</div>
</div>
{% endfor %}
The queryset "items3" holds the data for the bars (name, start- and finish-date)
Example:
bar1 01/01/2012 10/01/2012
bar2 08/01/2012 14/01/2012
I use this to make the bars draggable:
(function() {
$(".bar").draggable({
containment: "parent"
});
})();
I use this to make the bars resizable:
https://codepen.io/ZeroX-DG/pen/vjdoYe
I use this to schedule them:
https://codepen.io/tutsplus/pen/ZEzerNB
I use this to assign a label to each row:
var iLabel = 0;
document.querySelectorAll('#labels').forEach(function (element, index) {
element.innerHTML = iLabel < labels.length ?
labels[iLabel] :
'';
iLabel++;
})
So far, the bars have the right length (start and finish date), are draggable and resizable.
The only thing for now is to append each bar to its row (first bar to first row and so on....)
I tried different ways, but ended up assigning each row and bar an ID and attaching them to one another:
$(document).ready(function(){
newfunction();
});
function newfunction(){
var thisrows = $("#row1");
var thisbars = $("#bar1");
/* var fragment = document.createDocumentFragment(); fragment.appendChild(thisbars); */
$(thisrows).html(thisbars);
}
When I try to use fragments, I get: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node.
Now, instead of hard-coding every id, I tried to do something like this:
function newfunction(){
var n = 0;
var e = 0;
$(".rows").each(function(){
var thisrows = $(this).attr("id") + n;
n++;
});
$(".bars").each(function(){
var thisbars = $(this).attr("id") + e;
var fragment = document.createDocumentFragment();
fragment.appendChild(thisbars);
e++;
});
$(thisrows).appendChild(fragment);
};
Which doesnt work, even without using fragments. Any suggestions?
Also, I want to save the new position and length of the bar when I move/resize it.
What would be the best approach to do this?
Thank you in advance
Here is my first post about this with an image of the table:
Django + JQuery - Append bars to table rows
I am not entirely sure I get the entire context but I think there some errors in the code, here is my attempt to resolve the script:
The only thing for now is to append each bar to its row (first bar to first row and so on....)
function newfunction(){
const bars = $(".bars");
$(".rows").each(function(index){
$(this).html(bars[index]);
});
};
To save the new position and length of the bar when I move/resize it, boils down to having an object with unique id for the bar { [bar id]: { position: ... , size: .... }, ...} or straight up array of bars [{ id: ..., size: ... } , ...] where you can easily switch positions. You update the object in the observer/listener.
Currently the code uses Vue.js to manage the inputs and post requests and is using JavaScript to handle things like Google Map functionality.
The issue is that when we wrap a div id around all the current HTML on a page so the Vue.js functionality works, it results in the Google Map code in a JavaScript file to run incorrectly and loads the page with no map. As soon as the Vue.js id (adminVenueVue) is removed the map works fine.
When trying to debug the issue it seems that the function that is responsible for updating the map doesn't run all the way through and stops when a listener function is created as no following code would run after. Below shows this function if you need more code please tell me.
function initCreateUpdateVenue() {
var mapCenter = new google.maps.LatLng({
lat: 54.445886,
lng: -3.435974
});
var marker, london = {
lat: 52.41,
lng: -1.69
};
var ZoomLevel = 5;
map = new google.maps.Map(document.getElementsByName('googleMap')[0], {
zoom: ZoomLevel,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.setZoom(5);
var input = (document.getElementsByName("autocomplete")[0]);
var options = {
componentRestrictions: {
country: "uk"
}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var element = document.getElementsByName("autocomplete")[0];
//remove any errors
element.classList.remove("is-invalid");
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
populate_hidden_fields(place);
set_venue_detail_fields(place);
populate_fields(place.address_components);
set_map_location();
});
}
Here is the HTML code (the Google Map code is at the bottom)
<div id="adminVenueVue">
<div class="row">
<div class="col-lg-12 ">
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Administrator Controls</div>
<div class="panel-body">
#include('venue.components.admin_controls', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Start by finding your address</div>
<div class="panel-body">
#include('venue.components.autocomplete-form', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Venue Details</div>
<div class="panel-body" style="padding-bottom: 16px;">
#include('venue.components.venue-details', ['submitButtonText' => 'Add Type'])
</div>
</div>
</div>
<div class="col-lg-6 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable ">Address Details</div>
<div class="panel-body">
#include('venue.components.form', ['submitButtonText' => 'Submit Venue'])
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 ui-sortable-disabled">
<div class="panel">
<div class="panel-heading disable-draggable">Map</div>
<div class="panel-body">
<div id="googleMap" name="googleMap" class="width-full" style="height: 500px;"></div>
</div>
</div>
</div>
</div>
</div>
I recommend using the Vue google map component (vue2-google-maps).
Follow this example code:
<body>
<div id="root">
<google-map :center="{lat: 1.38, lng: 103.8}" :zoom="12" style="width: 100%; height: 500px">
<ground-overlay source="./overlay.png" :bounds="{
north: 1.502,
south: 1.185,
east: 104.0262,
west: 103.5998,
}" :opacity="0.5">
</ground-overlay>
</google-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
v: '3.26',
},
// Demonstrating how we can customize the name of the components
installComponents: false,
});
document.addEventListener('DOMContentLoaded', function() {
Vue.component('google-map', VueGoogleMaps.Map);
Vue.component('ground-overlay', VueGoogleMaps.MapElementFactory({
mappedProps: {
'opacity': {}
},
props: {
'source': {type: String},
'bounds': {type: Object},
},
events: ['click', 'dblclick'],
name: 'groundOverlay',
ctr: () => google.maps.GroundOverlay,
ctrArgs: (options, {source, bounds}) => [source, bounds, options],
}));
new Vue({
el: '#root',
data: {
place: '',
},
});
});
</script>
</body>
Or, if you're using webpack and Vue file components, follow the instructions bellow.
First install it : npm install vue2-google-maps
Then register it in main.js file
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_TOKEN',
libraries: 'places', // This is required if you use the Autocomplete plugin
}
})
So, you can use it like a component:
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
#click="center=m.position"
/>
</GmapMap>
More at:
https://www.npmjs.com/package/vue2-google-maps
https://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html
https://alligator.io/vuejs/vue-google-maps/ (tutorial)
I'm working on learning Angular with Google maps and having difficulty rendering a map within a div controlled by an ng-if directive.
For my application, I would like the map render upon receiving the coordinates from the $scope.location function. I would then click on a button and invoke $scope.myRide in order to place a marker on the map. However, what is happening is that the map does not render until I click on the button.
The coordinates within $scope.map are serve as placeholders until the actual coordinates are received from $scope.location.
Any assistance will be greatly appreciated :)
angular.module('MapView',[])
.config(function($stateProvider){
$stateProvider
// the state will go on the html that you want route the user.
.state('mapView', {
url: '/mapView',
templateUrl: 'app/mapView/mapView.html',
controller: function($scope){
$scope.map = { center: { latitude: 38, longitude: -122 }, zoom: 15 };
$scope.output = document.getElementById("loc");
$scope.maker = {};
$scope.coords = {};
$scope.mockUsers = [{username: 'young', mess: 'I need a ride at 9am'},{username: 'young', mess: 'I need a ride at 9am'}, {username: 'young', mess: 'I need a ride at 9am'}]
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords.lon = true; // added this
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()
$scope.myRide = function(){
$scope.maker.latitude = $scope.map.center.latitude;
$scope.maker.longitude = $scope.map.center.longitude;
}
},
controllerAs: 'LoginCtrl'
});
})
The following is the HTML:
<div ui-sref='mapView' >
<div ng-show = "coords.lon == true">Hello</div>
<div id="loc"></div>
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' maker=>
<ui-gmap-marker coords="maker" icon="icon" idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
</div>
<div class="btn-Center">
<button class="btn btn-danger" ng-click='myRide()' >Ride</button>
</div>
<div id="mapUsers">
<div class="clear" ng-repeat='user in mockUsers'>
<div class="mapUserImg">
<img class="img-responsive" src="http://falconbus.in/images/site/user_icon.png">
</div>
<h1> {{ user.username }} </h1>
<p> {{ user.mess}} </p>
</div>
</div>
</div>
I have some recomendations,
1) for debugging you can install the chrome extension ng-inspector in there you can view what value you have in center and zoom when you are in the html side, check if the data have sense.
2) i thing you use angular-google-maps from angular-ui if is true, you have two errors,
<div id="mapDiv" ng-if="coords.lon">
<ui-gmap-google-map center='map.center' zoom='map.zoom' **maker=**>
<ui-gmap-marker coords="maker" **icon="icon"** idkey="1"></ui-gmap-marker>
</ui-gmap-google-map>
marker empty is not necesesary and icon do are inside to options like the example in the official website.
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
<div ng-cloak>
<ul>
<li>coords update ctr: {{coordsUpdates}}</li>
<li>dynamic move ctr: {{dynamicMoveCtr}}</li>
</ul>
</div>
3) in the anglar-google-maps website you can use Edit in Plnkr for made some first test to familiarize with this directives
[<script src="~/Scripts/app/Home.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>AngularJS Examples</h1>
<div ng-app="myApp" style="width:400px;">
<div ng-controller="homeController">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Person Name:</td>
<td>
<input type="text" ng-model="Person.personName" />
</td>
</tr>
<tr>
<td>Person Age:</td>
<td>
<input type="text" ng-model="Person.personAge" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div class="alert alert-info" ng-if="Person.personAge < 18">
Person Age must be <strong>above 18 years.</strong>
</div>
<div class="alert alert-success" ng-if="Person.personAge >= 18 && Person.personAge <= 100">
<strong>Valid Age.</strong>
</div>
<div ng-if="Person.personAge > 100" class="alert alert-warning">
Person Age must be <strong> between 18 and 100.</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
learn from c-sharpcorner.com
I noticed that upon receiving the coordinates, If I click anywhere on the page the map will load. I thus modified the js file to simulate a click, and it works. Although this works for my application, I'm still not sure what the root issue of the problem is. Any assistance would be greatly appreciated.
This is the function I modified by adding a .click() :
$scope.location = function(){
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
navigator.geolocation.getCurrentPosition(function(position){
console.log('current position',position.coords)
$scope.map.center.latitude = position.coords.latitude;
$scope.coords.lat = position.coords.latitude; //added this
$scope.map.center.longitude = position.coords.longitude;
$scope.coords = true; // added this
document.getElementById('loc').click();
}, function(){
$scope.output.innerHTML = "Unable to retrieve your location";
});
}()
My script is the following:
#using (Html.BeginFooterScripts())
{
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script type="text/javascript" src="/Content/Northwestern/js/_libs/knockout.mapping/knockout.mapping.2.4.1.js"></script>
<script type="text/javascript" src="~/Content/Northwestern/js/views/TabPanel/location-card.js"></script>
<script type="text/javascript">
$(function() {
initialize();
});
</script>
<script>
$(function() {
// we must be on a detail page, we don't have a current location, so get it!
if (viewModel.currentLocation.latitude == 0 || viewModel.currentLocation.longitude == 0) {
geoLocate(function(location) {
viewModel.currentLocation.latitude = location.coords.latitude;
viewModel.currentLocation.longitude = location.coords.longitude;
displayLocation('#Model.LocationId');
}, geoLocateError);
} else {
displayLocation('#Model.LocationId');
}
});
</script>
}
my external script is :
/**********************************************
* Global variables
**********************************************/
var applied = false;
var geoLocateError = function onError(error) {
alert(error.message);
};
function ViewModel() {
var self = this;
self.currentLocation = {
latitude: 0,
longitude: 0
};
self.LocationId = ko.observable();
}
var viewModel = new ViewModel();
$(function () {
});
function initialize() {
ko.applyBindings(viewModel);
geoLocate(function(location) {
initLocation(location);
}, geoLocateError);
}
/**********************************************
* Location Functions
**********************************************/
function initLocation(location) {
viewModel.currentLocation = {
latitude: location.coords.latitude,
longitude: location.coords.longitude
};
}
function displayLocation(id) {
var apiUrl = '/api/northwestern/locations/getlocationbyid/' + id;
var data = {
'latitude': viewModel.currentLocation.latitude,
'longitude': viewModel.currentLocation.longitude
};
self.LocationId = id;
$.getJSON(apiUrl, data, function (response) {
var fragment = document.createDocumentFragment(),
container = document.createElement('div'),
viewModel = response;
fragment.appendChild(container);
// merge together all the display types into a commma-separated list
response.TypeListDisplay = $.map(response.Types, function (obj, t) {
return obj.ItemName;
}).join(', ');
ko.renderTemplate(
"location-detail-template",
viewModel, {
afterRender: function () {
$('#detail-container').html(container.innerHTML);
}
},
container
);
});
}
and here is the markup :
<div class="row">
<div class="col md-4">
<div class="section-content">
<div id="detail-container">
</div>
</div>
<script type="text/html" id="location-detail-template">
<div class="card card-locations-alt">
<div class="card-content">
<figure class="map">
<a target="_blank" href="https://www.google.com/maps/dir/Current+Location/#Model.Location.Latitude, #Model.Location.Longitude">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=#Model.Location.Latitude,#Model.Location.Longitude&zoom=13&size=65x65&maptype=roadmap&markers=color:0x776EA7%7Clabel:%7C #Model.Location.Latitude,#Model.Location.Longitude">
</a>
</figure>
<div class="location-content" itemscope="" itemtype="http://schema.org/LocalBusiness">
<div class="location-name">
<h2 class="location-title" itemprop="name" data-bind="text: ItemName"></h2>
</div>
<div class="distance">
<i class="material-icons">place</i> <span data-bind="text: Distance.toFixed(1)"> Mi</span>
</div>
<div class="location-phone">
<a data-bind="attr: { 'href': clickToCallify(Phone), 'data-track-event': 'Find a Location - Detail', 'data-track-action': 'call icon' }" class="tel" itemprop="telephone"></a>
</div>
</div>
<div class="location-actions flex-container align-center no-print">
<a class="locations-icon flex-item tel" href="tel:8475358000">
<div class="call-icon uppercase">
<i class="material-icons">phone</i><br>
call
</div>
</a>
<a data-bind="attr: {'href' : 'https://www.google.com/maps/dir/Current+Location/' + Latitude + ',' + Longitude, 'data-track' : 'Find a Location', 'data-track-action' : 'directions', 'data-track-label' : ItemName }" target="_blank" class="locations-icon flex-item uppercase">
<i class="material-icons">directions</i><br>
directions
</a>
<a href="" class="location-detail locations-icon flex-item uppercase">
<i class="material-icons">info</i><br>
details
</a>
</div>
</div>
</div>
</script>
</div>
<div class="col md-7">
#(new HtmlString(Model.Body))
</div>
</div>
<br />
}
now, when I applyBindingsviewModel) under the initialize function, it works the first time, then it throws an error "cannot apply bindings muliple times for the same element.
I have tried to do a ko.cleanNode, but that did not work.
when i take the applyBindings off, I don't get the error, but the program skips over all but the last page component.
The problem is cause binding applies two times to the same elements. So the can be some other knockout binding in your code or initialize function executes second time.
If you have few models which you would like to bind to your page you can use second parameter of applyBindings, if you do not pass it model binds to body.
Optionally, you can pass a second parameter to define which part of the document you want to search for data-bind attributes.
http://knockoutjs.com/documentation/observables.html